介绍

通过脚本(JavaScript)，用于图形的绘制，<canvas> 标签相当于一个图形容器 / 画布。

绘图

1、创建一个画布

<canvas id="myCanvas" width="200" height="100">您的浏览器不支持 HTML5 canvas 标签</canvas>

注意：
1、 默认情况下 <canvas> 元素没有边框和内容。
2、可以在HTML页面中使用多个 <canvas> 元素。

2、使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

.html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

.js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

效果如下：

Canvas 坐标

canvas 的左上角坐标为 (0,0)

Canvas 路径

在Canvas上画线，首先定义开始和结束坐标，然后绘制

• moveTo(x,y)： 定义线条开始坐标
• lineTo(x,y)： 定义线条结束坐标
• stroke()：绘制

示例：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Canvas 绘制圆形

使用以下方法:

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

• beginPath();：开始绘制圆
• arc(x,y,r,start,stop)： 圆的信息：圆心(x,y)、半径r、开始位置start、结束为止stop
• stroke()：绘制

示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

绘制文本

使用的属性和方法如下：

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

示例：

cv_ctx.font = "30px Arial";
// cv_ctx.fillText("Hello World",10,50);
cv_ctx.strokeText("Hello World",10,50);

绘制渐变色

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

两中设置Canvas渐变的方法：

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

示例1：线条渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建线条渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

addColorStop(0,"red")：规定渐变对象中的颜色和停止位置。
第一个参数值的范围是 0 ～ 1，表示颜色渐变偏区域的移量。

示例2：圆形、径向渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(100,100,10,100,100,50);
grd.addColorStop(0,"red");
grd.addColorStop(1,"yellow");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

createRadialGradient(100,100,10,100,100,50) 参数解释

• 100,100,10）是第一个圆，(100,100,50 )是第二个圆。
• 10 ~ 50 的半径之间的区域 是颜色渐变的区域。

绘制图像

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

• drawImage(image,x,y)

示例：

var cv = document.getElementById("hb1");
var cv_ctx = cv.getContext("2d");
var imgs = document.getElementById("img1");
imgs.onload = function(){
    cv_ctx.drawImage(imgs,0,0);
}

方法补充介绍

颜色、样式、阴影

• fillStyle、strokeStyle属性值

context.fillStyle = color | gradient | pattern;
context.strokeStyle = color | gradient | pattern;

fillStyle示例：定义用红色填充的矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

效果:

strokeStyle示例：绘制一个矩形。使用渐变笔触：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

效果:

• shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY 阴影属性的值

示例：

cv_ctx.fillStyle = "red";
cv_ctx.shadowColor = "black";
cv_ctx.shadowBlur = 10;
cv_ctx.shadowOffsetX = 10;
cv_ctx.shadowOffsetY = 10;
            
cv_ctx.fillRect(20,20,50,50);

效果:

• createLinearGradient()

语法：context.createLinearGradient(x0,y0,x1,y1);

• createRadialGradient()

语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);

注意：渐变的区域是 r0 ~ r1之间

• createPattern()

语法：context.createPattern(image,"repeat | repeat-x | repeat-y | no-repeat");

线条样式

• lineCap

语法： context.lineCap="butt | round | square";

• lineJoin

语法： context.lineJoin="bevel|round|miter";

• miterLimit

 语法：    context.miterLimit=number;

斜接长度指的是在两条线交汇处内角和外角之间的距离:

• 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
• 只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

矩形

• rect(x, y, width, height)

语法： context.rect(x,y,width,height);

创建矩形。

• fillRect(x , y, width, height)

语法： context.fillRect(x,y,width,height);

绘制"已填充"的矩形。默认的填充颜色是黑色。

• strokeRect(x,y,width,height)

语法： context.strokeRect(x,y,width,height);

绘制矩形（无填充）。笔触的默认颜色是黑色。

• clearRect(x,y,width,height)

语法： context.clearRect(x,y,width,height);

清空给定矩形内的指定像素。

路径

• fill()

语法： context.fill();

填充当前的图像（路径）。默认颜色是黑色。

• stroke()

语法： context.stroke();

绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

• moveTo(x, y)、lineTo(x, y)

语法： context.moveTo(x,y);
语法： context.lineTo(x,y);

示例：

ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

• beginPath()

语法： context.beginPath();

开始一条路径，或重置当前的路径。以达到绘制多个图形。

ctx.beginPath();
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // Draw it

• closePath()

语法： context.closePath();

创建从当前点到开始点的路径。

示例：

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

• clip()

语法： context.clip();

示例：

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
//剪切一个矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//剪切之后画一个矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);

效果：

一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

• quadraticCurveTo(cpx, cpy, x, y)

语法： context.quadraticCurveTo(cpx, cpy, x, y);

示例：

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

效果：

代码分析：

二次贝塞尔曲线需要两个点:

• 第一个点(20, 100)是用于二次贝塞尔计算中的控制点。
• 第二个点(200, 20)是曲线的结束点。

• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

语法： context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

示例：

cv_ctx.beginPath();
cv_ctx.moveTo(0,50);
cv_ctx.bezierCurveTo(25,0,75,100,100,50);
cv_ctx.stroke();

效果：

三次贝塞尔曲线需要三个点：

• 前两个点是用于三次贝塞尔计算中的控制点。原理同二次贝塞尔曲线
• 第三个点是曲线的结束点。

• arc(x, y, r, sAngle, eAngle, counterclockwise?)

语法： context.arc(x, y, r, sAngle, eAngle, counterclockwise?);

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

语法： context.arcTo(x1, y1, x2, y2, r);

示例：

ctx.beginPath(); 
ctx.moveTo(20,20);           // 创建起始点
ctx.lineTo(100,20);          // 创建水平线 
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 画出来

其中第一条线上的任意一点的横纵坐标为上一次点的位置，此示例中为 100,20。由 (x1,y1),(x2,y2),(100,20) 三点可确定两条直线的位置再由半径确定弧的位置。

• isPointInPath(x, y)

语法： context.isPointInPath(x, y);

如果指定的点位于当前路径中，isPointInPath() 方法返回 true，否则返回 false。

转换

• scale(scalewidth,scaleheight)

语法： context.scale(scalewidth,scaleheight);

示例：

var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

注意：对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。

• rotate(angle)

语法： context.rotate(angle);

• 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

示例：
如需旋转 20 度，可规定下面的公式：20*Math.PI/180。

ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

效果：

• translate(x, y)

语法： context.translate(x, y);

示例：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

效果：

• transform(a, b, c, d, e, f)，setTransform(a, b, c, d, e, f)

语法： context.transform(a, b, c, d, e, f);
语法： context.setTransform(a, b, c, d, e, f);

这里b、c的理解有点绕，请看示例。

cv_ctx.beginPath();
cv_ctx.moveTo(150,101);
cv_ctx.lineTo(150,116);
cv_ctx.strokeStyle = "black";
cv_ctx.stroke();

cv_ctx.beginPath();
cv_ctx.moveTo(200,101);
cv_ctx.lineTo(200,121);
cv_ctx.strokeStyle = "red";
cv_ctx.stroke();

cv_ctx.beginPath();
cv_ctx.moveTo(0,100);
cv_ctx.lineTo(200,100);
cv_ctx.strokeStyle = "green";
cv_ctx.stroke();

cv_ctx.transform(1, 0.1, 0, 1, 0, 0);
cv_ctx.beginPath();
cv_ctx.moveTo(0,100);
cv_ctx.lineTo(200,100);
cv_ctx.strokeStyle = "blue";
cv_ctx.stroke();

cv_ctx.transform(1, -0.2, 0, 1, 0, 0);  
//  cv_ctx.setTransform(1, -0.1, 0, 1, 0, 0) 
cv_ctx.beginPath();
cv_ctx.moveTo(0,100);
cv_ctx.lineTo(200,100);
cv_ctx.strokeStyle = "purple";
cv_ctx.stroke();

效果：

代码解析：
蓝色线，b = 0.1，意思是：沿着与X轴的方向，绘制一条与X轴上的每个点(x, 0)相距 x * 0.1 一条线。

• 该变换只会影响 transform() 方法调用之后的绘图。
• transform() 方法会相对于其他变换来发生行为，即累计，如果已经将绘图设置为放到两倍，再调用 transform() 方法把绘图放大两倍，最终绘图将放大四倍。
• setTransform() 方法把当前的变换矩阵 重置，然后以相同的参数运行 transform()。
  cv_ctx.transform(1, -0.2, 0, 1, 0, 0); 等价 cv_ctx.setTransform(1, -0.1, 0, 1, 0, 0)

文本

• font

语法： context.font="italic small-caps bold 12px arial";

属性值：

• textAlign

语法： context.textAlign="center | end | left | right | start";

效果：

• textBaseline

语法： context.textBaseline="alphabetic | top | hanging | middle | ideographic | bottom";

效果：

• fillText(text,x,y,maxWidth?)、stroktText(text,x,y,maxWidth?)

语法： context.fillText(text,x,y,maxWidth);
语法： context.strokeText(text,x,y,maxWidth);

• measureText(text)

语法： context.measureText(text).width;

图像绘制

• drawImage(iimg,sx,sy,swidth,sheight,x,y,width,height)

语法： context.drawImage(img, x, y);

语法： context.drawImage(img, x, y, width , height);

语法： context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

像素操作

• createImageData((width, height) | imageData)

以指定的尺寸（以像素计）创建新的 ImageData 对象：
语法： var imgData=context.createImageData(width,height);

创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：
 语法：    var imgData=context.createImageData(imageData);

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 信息以数组形式存在，并且由于数组包含了每个像素的四条信息，所以数组的大小是 ImageData 对象的四倍：width * height * 4。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

示例1：

把 ImageData 对象中的像素变为红色的语法：
imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4) {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
 }

• getImageData(x, y, width, height)

语法： context.getImageData(x, y, width, height);

• putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight)

语法： context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

合成

• globalAlpha

语法： context.globalAlpha=number;

示例：

cv_ctx.globalAlpha=0.2;
cv_ctx.fillStyle="red";
cv_ctx.fillRect(20,20,75,50);
// Turn transparency on

cv_ctx.globalAlpha=1;
cv_ctx.fillStyle="blue";
cv_ctx.fillRect(50,50,75,50);

cv_ctx.globalAlpha=0.2;
cv_ctx.fillStyle="green";
cv_ctx.fillRect(80,80,75,50);

效果：

• globalCompositeOperation

语法： context.globalCompositeOperation="source-in";

其他