Canvas入门

前言-什么是Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas画布

绘图工具

---

canvas 元素用于在网页上绘制图形。
设置画布大小，使用属性方式设置。在css中设置大小可能会失真。

//html:
<canvas id="myCanvas" width="200" height="100"></canvas>
//JS:
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

绘图方法

---

cxt.moveTo(x,y) //落笔
cxt.lineTo(x,y) //连线
cxt.stroke() //描边

cxt.beginPath() //开启新的图层
cxt.closePath() //闭合路径

cxt.strokeStyle=’’ //线的颜色
cxt.strokeWidth=’’ //线的宽度
cxt.lineCap=’’ //设置线帽

渐变方案

---

• 创建渐变方案
  var lgd = cxt.createLinearGradient(x0,y0,x1,y1)
• 添加开始颜色。0代表开始，1代表结束。
  lgd.addColorStop(0,‘red’)
• 添加结束颜色
  lgd.addColorStop(1,‘blue’)

cxt.strokeStyle = lgd;

填充效果

---

• 设置填充效果
  cxt.fill()
• 设置填充颜色
  cxt.fillstyle=‘值’

非零环绕原则

---

1. 绘制的是一个闭合图形
2. 假如在绘制的时候，出现绘制顺序有顺时针和逆时针
3. 任意找一点，越简单越好
4. 以点为圆心，绘制一条射线，越简单越好(相交的边越少越好)
5. 以射线为半径顺时针旋转，相交的边同向的记为+1，反方向记为-1
6. 相加为0的区域不填充，非零区域填充。

绘制虚线

---

cxt.setLineDash(数组)   //实->空白 循环
cxt.stroke()

绘制动画效果

---

• 绘制一个描边矩形
  cxt.strokeRect(x,y,width,height)
• 绘制一个填充矩形
  cxt.fillRect(x,y,width,height)
• 清屏
  cxt.clearRect(x,y,width ,height)

绘制动画效果：

1. 先清屏
2. 绘制图形
3. 处理变量

绘制文本

---

• 绘制填充文本
  cxt.fillText(‘文本内容’,x,y)
• 绘制镂空文本
  cxt.strokeText(‘文本内容’,x,y)
• 设置文字大小
  cxt.font = ‘20px 微软雅黑’
• 设置文字对齐方式
  cxt.textAlign=‘left|right|center’
• 设置文字垂直对齐方式
  cxt.textBaseline=‘top|middle|botoom|alphabetic(默认)’
• 阴影效果
  cxt.shadowColor=’’
  cxt.shadowOffsetX=’’
  cxt.shadowOffsetY=’’
  cxt.shadowBlur=’’ //设置文字饮用模糊度

绘制图形

---

• 将图片绘制到画布
  cxt.drawImage(图片对象,x,y)
• 将图片绘制到画布中的指定区域
  cxt.drawImage(图片对象,x,y,width,height)
• 将图片的指定区域绘制到画布中的指定区域
  cxt.drawImage(图片对象,sx,sy,swidth,sheight,x,y,width,height)

绘制圆弧

cxt.arc(x,y,raduys,startradian,endradian[,direct])
//startradian :开始弧度
//endradian: 结束弧度 二拍:2*Math.PI
//direct: 方向，默认顺时针方向

平移(坐标系原点的平移)

---

cxt.translate(x,y)

旋转

---

cxt.rotate(弧度)

伸缩

---

cxt.scale(x,y)
//沿着x轴、y轴缩放倍数