HTML5 Canvas绘图

Canvas绘图工具

• 1、标签的基本结构如下：
  < /canvas>
  *宽高写在内部跟样式有区别的（样式设置-画出的图形宽高改变，内部设置-画出的图形宽高不变）
  canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和 name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。JavaScript使用document.getElementById()方法来确定正确的画布，var cvs = document.getElementById(“myCanvas”);

• 2、每个画布都必须要有一个context（上下文）的定义，如下面代码所示。
  就目前的情况来说，官方规范只承认一个2D环境：var ctx = cvs.getContext(“2d”);
  在标识画布并指明了它的上下文之后，就可以开始绘画了。

• 3、绘制
  ctx.beginPath() ：开始一个路径
  ctx.moveTo(x,y)： 路径移到画布中的指定点 , 即起点
  ctx.lineTo(x,y) ：添加一个新点，画线
  ……
  ctx.closePath() ：关闭绘制路径
  ctx.fillStyle：用来设置填充颜色
  ctx.fill() ：填充已定义好的路径
  ctx.lineWidth：画线的宽度
  ctx.strokeStyle：用来设置描边颜色
  ctx.stroke() ：绘制已定义好的路径

• 4、矩形的绘制
  rect(x,y,w,h)：
  x、y为起始坐标，w、h为矩形的宽、高
  支持这么写：ctx.fillRect(x,y,w,h) 及 ctx.strokeRect(x,y,w,h)

• 5、圆形的绘制
  arc(x,y,r,sa,ea,true/false)：
  x、y为圆心坐标，r为半径，
  sa、ea分别为起始角度和结束角度，
  true是逆时针画圆，false是顺时针画圆；
  360度角即2PI弧度，1度就是2PI/360=PI/180弧度，
  90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

• 6、贝塞尔曲线
  quadraticCurveTo (cx,cy,ex,ey)
  二次贝塞尔曲线，一个控制点，一个结束点
  quadraticCurveTo (cx,cy,ex,ey)
  二次贝塞尔曲线，一个控制点，一个结束点
  canvas-js贝塞尔曲线代码在线生成工具：http://www.j–d.com/bezier

• 7、绘制文字
  （1）方法：
  fillText(text,x,y,maxWidth): 填充绘制
  text表示文字 x、y为坐标
  maxWidth可选，为文字最大宽度，防止文字溢出

strokeText(text,x,y,maxWidth): 描边绘制
text表示文字 x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出

（2）常用属性设置：
font 文本内容的当前字体属性
示例: ctx.font = ‘bold 60px 微软雅黑’;（顺序不能改）
textAlign 文本内容的当前对齐方式（一般不需要）
示例: ctx.textAlign=”left”; ctx.textAlign=”right”;
（左右是根据你定的xy坐标来定的-左-最左边在坐标；右-最右边在坐标 ↓上下文本基线一样性质）
textBaseline 绘制文本时使用的当前文本基线
示例: ctx.textBaseline=”middle”;
ctx.textBaseline=”top”; ctx.textBaseline=”bottom”;

• 8、图形的组合方式
  globalCompositeOperation属性 控制图形的组合方式、这个属性归getContext(‘2d’)所创建的对象所有。
  globalCompositeOperation=”type”;
  type的值：
  source-over：默认值，表示新图覆盖在旧图之上
  source-atop：只绘制旧图和重叠的部分，其他透明
  source-in：只绘制新图的重叠部分，其他透明
  source-out：只绘制新图，重叠部分和旧图透明
  destination-over：表示旧图覆盖在新图之上
  destination-atop：只绘制新图和重叠的部分，其他透明
  destination-in：只绘制旧图的重叠部分，其他透明
  destination-out：只绘制旧图，重叠部分和新图透明

• 9、图形的阴影（阴影属性）
  shadowColor：设置阴影颜色
  shadowBlur：设置阴影模糊级别
  shadowOffsetX：设置阴影在x轴上距离图形的距离
  shadowOffsetY：设置阴影在y轴上距离图形的距离

• 10、图像的处理
  （1）绘制图像
  drawImage(img,x,y)绘制图像：把图片绘制在画布上面
  img：图片
  x：图片横坐标的起始值
  y：图片纵坐标的起始值

  drawImage(img,x,y,w,h)绘制固定宽高的图像
  drawImage(img,x,y,w,h)
  img：图片
  x：图片横坐标的起始值
  y：图片纵坐标的起始值
  w：在画布中图片显示的宽度
  h：在画布中图片显示的高度

  drawImage(img,x,y,w,h,rx,ry,rw,rh)剪切图像，在画布上定位被剪切部分：
  drawImage(img,x,y,w,h,rx,ry,rw,rh)
  img：图片
  x、y：源图片剪切部分的坐标
  w、h：在源图片上裁剪的宽、高–
  rx、ry：显示在画布中的坐标
  rw、rh：显示在画布中的宽、高

  （2）图像在画布中的平铺
  createPattern(img,type)
  img：图片
  type：repeat整个画布平铺
  repeat-x/y在x/y轴方向上平铺
  no-repeat不平铺
  （3）图像的裁剪(配合路径使用)
  clip()
  配合路径使用，先绘制好路径，
  然后调用clip方法；
  提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
  （4）像素处理
  getImageData(x,y,w,h)
  putImageData(……)
  getImageData(x,y,w,h)：可以获取指定区域内
  的像素点的数据；
  x:canvas的x轴坐标点 y:canvas的y轴坐标点
  w:指定区域的宽度 h:指定区域的高度
  putImageData(imgData,x,y)：getImageData
  返回的像素数据点imgData填充到画布上面，从x、y点开始填充；

（5）图像的输出
canvas.toDataURL( type , args ):
为canvas的方法，用来返回一个url地址，将canvas画布转化为一张图像；
图像是基于Base64编码的 , 如果不指定两个参数，无参数调用该方法，转换的图像格式为png格式 。
•type:图像格式，image/png image/jpeg等
•args:可选参数。例如，如果type为image/jpeg，则args可以是0和1之间的值，以指定图像的品质。

（6）其他方法
scale(w,h) 缩放当前绘图:
w: 缩放绘图的宽度 h: 缩放绘图的高度
rotate(angle) 旋转当前绘图的坐标轴
1°等于Math.PI/180 5°=5*Math.PI/180
translate(x,y) 重新映射画布上的 (0,0) 位置
save()、restore():绘制复杂图形必不可少的方法，分别用来保存、恢复canvas的状态，无参数；

（7）清楚画布
ctx.clearRect(x,y,width,height):
x : 清除起点横坐标
y : 清除起点纵坐标
width : 清除长度
height : 清除高度

清除画布：ctx.clearRect(0,0,cvs.width,cvs.height);