Canvas 绘图使用语法

1、canvas标签

  <canvas  width=""  height=""  id="">

  您的浏览器不支持canvas，请更换浏览器！

*注：canvas的宽高度最好设置成行内样式，不然会等比变化

例如：在嵌入样式中设置canvas 宽高为：500px X 500px

在canvas中画100px * 100px 的矩形，矩形宽高会等比变化

500/300 : 500/150 = x/100 : y/100;

  </canvas>

 2、默认宽度300px，默认高度 150px

 3、canvas绘图环境设置

  getContext("2d"); 目前支持2d绘图环境

/*

    var can = document.getElementById("can");

    var cxt = can.getContext("2d"); //2d绘图环境，提供api[stroke、fill、etc.]

*/

4、绘图路劲:

  beginPath() :开始路劲

  closePath():结束路劲

//形成一个闭合路径

  moveTo(x,y):将触笔移动到x,y点

  lineTo(x,y):绘制到x,y点

/*绘制三角形*/

//一个起点，两个终点

  stroke(): 触笔方法 画线  默认为黑色 绘制一个空心的矩形

  fill():填充方法  绘制一个实心的矩形

  rect(x,y,w,h):矩形路劲/*x => 横坐标  y => 纵坐标 w => 宽度 h=> 高度 */

/*

cxt.rect(50,50,100,100);

cxt.stroke();

*/

  save():保存路劲

  restore():恢复路劲

/*相当于开辟一个新的空间，把这个内容放在新的空间里，画完在释放出来*/

5、绘制矩形：

  fillRect(x,y,w,h)   填充实心矩形  /*cxt.fillRect(50,50,100,100);*/

  strokeRect(x,y,w,h)  绘制空心矩形 /*cxt.strokeRect(50,50,100,100);*/

  clearRect(x,y,w,h)  清楚矩形选区

/*cxt.clearRect(0,0,can.width,can.height);清除整个canvas选区*/

6、设置绘图样式：

  fillStyle: 填充颜色

  strokeStyle: 触笔颜色

/*cxt.strokeStyle = "#03f";cxt.strokeRect(50,50,100,100);*/

  lineWidth: 触笔宽度(线宽)

/*cxt.lineWidth = 10*/

两者同时使用时显示与书写顺序有关：

7、图形边界样式：

  lineJoin : 边界连接点样式

  miter(默认值),round(圆角),bevel(斜角)

/*ctx.lineJoin="round";*/

  lineCap: 端点样式

  butt(默认值),round(圆角),square(高度多出线宽一半)

/*ctx.lineCap="round";*/

8、绘制圆形：

  arc(x,y,r,0,360,false)

        x,y  圆心坐标位置

        r 圆半径

        0,360 从0度到360度 绘制一个圆形

9、绘制曲线

  arcTo(x1,y1,x2,y2,r)

  x1,y1 坐标一  x2,y2坐标二   r圆弧半径

  quadraticCurveTo(dx,dy,x1,y1)

 10、 贝塞尔曲线:dx,dy控制点  x1,y1结束坐标

  bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)

  贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二

  x1,y1结束坐标

11、canvas变换

  translate(x,y)

  坐标基准点偏移 : 从起始点为基准，移动到当前位置

  rotate(弧度): 旋转  弧度公式 ：角度*Math.PI/180

  scale : scale(wb,hb)缩放比例(缩放canvas绘制的图片)

相对于前一个进行缩放

定义和用法

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

• 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
• 起始角：arc(100,75,50,0,1.5*Math.PI)
• 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

绘制图片

  图片预加载，获取图片文件

  onload中调用

  drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)

设置背景

  createPattern(img,平铺方式)

  线性渐变:createLinearGradient(x1,y1,x2,y2)

            x1,y1起始坐标点

            x2,y2结束坐标点

  径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)

           x1,y1,r1内圆坐标及半径

           x2,y2,r2外圆坐标及半径

  addColorStop(位置,颜色)

  位置:渐变点  0-1之间 可多个

线性渐变：

径向渐变：

14、绘制文本

  strokeText(文本,x,y);  绘制空心文本

  fillText(文本,x,y); 绘制实心文本

  font = "font-size  font-family" 注:尺寸 字体缺一不可

  textAlign = "";文本左右对齐方式

               start center end  left right

  textBaseline文本上下对齐方式

          alphabetic  默认。文本基线是普通的字母基线。

          top  文本基线是em方框的顶端。。

         hanging  文本基线是悬挂基线。

          middle  文本基线是em方框的正中。

           ideographic  文本基线是表意基线。

          bottom  文本基线是em方框的底端。

  measureText(文本).width; 文本实际宽度(只有宽度值)

15、阴影

  shadowOffsetX,shadowOffsetY    x轴、y轴偏移

  shadowBlur    阴影模糊度

  shadowColor  阴影颜色

  默认颜色:rgba(0,0,0,0)

16、像素

  createImageData(sx,sy)

  创建新的、空白的 ImageData对象

  getImageData(x1,y1,sx,sy)【必须是同源，同一域名下】

  返回 ImageData对象，该对象为画布上指定的矩形复制像素数据  putImageData(img,x2,y2)

          globalAlpha  设置或返回绘图的当前 alpha 或透明值

          globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

  source-over默认。在目标图像上显示源图像。

  source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

  source-in  在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。

  source-out  在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。

  destination-over在源图像上方显示目标图像。

  destination-atop在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

  destination-in在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。

  destination-out在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

  lighter显示源图像 + 目标图像。

  copy显示源图像。忽略目标图像。

  火狐、谷歌浏览器右键菜单可直接导出为图片

  toDataURL

19、事件 

  isPointInPath(x,y)

  如果指定的点位于当前路径中，返回布尔值

  只能判断最后绘制出来的图片