工作学习日（第一周）[2day]---很牛的canvas

1.canvas创建的就是一个画布，这个画布里面的内容其实是靠js来实现的

2.什么是canvas

3.canvas在网页中是一个矩形框

绘制形状

我们可以在Canvas上绘制各种形状。在绘制前，我们需要先了解一下Canvas的坐标系统：

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数

<canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

4.使用canvas的步骤

（1）找到canvas元素

（2）使用getContext("2d")对象是内建的 HTML5 对象,相当于画笔

（3）设定画笔的起始位置（即创建路径），一般有moveTo(x，y)方法来设置

（4）设置画法和画笔结束的位置

（5）使用stroke(); 进行绘制

5.实例

（1）画线

（2）在canvas中绘制圆形, 我们将使用以下的方法:

arc(x,y,r,start,stop)

eg:ctx.arc(95,50,40,0,2*Math.PI);（PI就是180°）

getContext方法指定参数2d，表示该canvas节点用于生成2D图案（即平面图案）。如果参数是webgl，就表示用于生成3D图像（即立体图案）

（3）绘制文本

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

（4）创建渐变色

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

a.创建线条渐变

b.创建一个径向/圆渐变

c.在画布上添加图片

把一幅图像放置到画布上, 使用以下方法:

• drawImage(image,x,y)

*其他属性，查看“http://www.runoob.com/tags/ref-canvas.html”

6.canvas画布内的内容如果想随着屏幕的分辨率来改变，一般的步骤为：

a:将canvas的宽和高设置为百分比的形式，canvas的宽和高要依赖于父元素，从父元素的div，找到body，再找到html；

b:设置一个参数来接收窗口变化的次数，窗口每次变化时，可以画布需要清空，再开始重绘；