HTML5之Canvas

感性认识

canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形，它就像页面的一个画布，利用canvas绘图的步骤很简单：

  1. 页面放置canvas；
  2. 获取canvas的context；
  3. 通过context的api用JavaScript来进行绘画；
  4. 绘制路径(矩形不需要)，设置样式，使用stroke或fill来填充；

首先我们了解canvas的坐标是这样的

先来看下示例

<script type="text/javascript">
	var canvas=document.getElementById("mycanvas");
	//获取context
	var ctx=canvas.getContext("2d");
	//设置样式
	ctx.strokeStyle="green";
	ctx.lineWidth=2;
	//绘制矩形(不需要绘制路径)
	ctx.strokeRect(10,10,180,60);
	
	//绘制直线
	ctx.moveTo(200,30);
	ctx.lineTo(280,60);
	ctx.stroke();
	
	//绘制圆形
	ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.arc(60,130,50,0,Math.PI*2,true);
	ctx.fill();
	
	//绘制三角形	
	ctx.beginPath();
	ctx.moveTo(120,130);
	ctx.lineTo(190,190);
	ctx.lineTo(280,150);
	ctx.closePath();
	ctx.stroke();
</script>

绘制的图形如下：

绘制简单图形

  1. 绘制矩形 
    fillRect(x, y, width, height) //绘制实心矩形，被填充
strokeRect(x, y, width, height)//绘制空心矩形，只是边框
    它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。
  2. 绘制圆形
    矩形不用绘制路径，直接fill或stroke，而其他的图形需要先绘制路径，然后在fill或stroke。 
    context.arc(x,y,r,sAngle,eAngle,counterclockwise);
    • x：圆的中心的 x 坐标。
    • y：圆的中心的 y 坐标。
    • r：圆的半径。
    • sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
    • eAngle：结束角，以弧度计。
    • counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI

  3. 绘制直线
    ctx.moveTo(200,30); //设置路径的起点
ctx.lineTo(280,60); //设置路径的终点
ctx.stroke(); //给路径着色
    如果上面示例，我们并没有使用beginPath，因为这是第一次绘图，所以不用，但如上例中绘制圆形，如果不用beginPath，你绘制出的图如

    这是因为没有使用beginPath来重置路径，而且这还牵涉到另一个API：closePath，它的作用是把起点终点链接起来，如绘制三角形，如果你注释掉closePath，将不会绘制成三角形只是折线而已。
    这里需要强调的是使用fill时会自动把起点和终点链接起来，就类似隐含先执行了closePath一样。这一点可以这样验证，把示例中的绘制圆形注释掉beginPath，而且只绘半圆，代码如下 
    <!--放置canvas-->
<canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
	var canvas=document.getElementById("mycanvas");
	//获取context
	var ctx=canvas.getContext("2d");
	//设置样式
	ctx.strokeStyle="green";
	ctx.lineWidth=2;
	//绘制矩形(不需要绘制路径)
	ctx.strokeRect(10,10,180,60);
	
	//绘制直线
	ctx.moveTo(200,30);
	ctx.lineTo(280,60);
	ctx.stroke();
	
	//绘制圆形
	//ctx.beginPath();
	ctx.fillStyle="blue";
	ctx.arc(60,130,50,0,Math.PI,true);
	ctx.fill();
	
	//绘制三角形	
	ctx.beginPath();
	ctx.moveTo(120,130);
	ctx.lineTo(190,190);
	ctx.lineTo(280,150);
	ctx.closePath();
	ctx.stroke();
</script>
    绘制的图形如下

    是不是感觉奇怪，如果把绘制圆形使用closePath，再把fill改成stroke，你就会发现路径是这样的

    所以beginPath和closePath需要要搞懂，会用慎用！

绘制渐变

  1. 线性渐变
    示例：
     
    var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");
//设置样式
ctx.lineWidth=20;
var g=ctx.createLinearGradient(0,0,0,100);
g.addColorStop(0,'green');
g.addColorStop(0.5,'blue');
g.addColorStop(1,'red');
ctx.strokeStyle=g;

ctx.moveTo(0,0);
ctx.lineTo(0,100);
ctx.stroke();
    绘图如

    绘制线性渐变需要使用createLinearGradient和addColorStop方法 
    context.createLinearGradient(x0,y0,x1,y1);
    • x0：渐变开始点的 x 坐标
    • y0：渐变开始点的 y 坐标
    • x1：渐变结束点的 x 坐标
    • y1：渐变结束点的 y 坐标
    gradient.addColorStop(stop,color);
    • stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    • color：在结束位置显示的 CSS 颜色值
  2. 径向渐变
    示例 
    <!--放置canvas-->
<canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");
//设置样式
var g=ctx.createRadialGradient(100,100,5,100,100,30);
g.addColorStop(0,'green');
g.addColorStop(0.5,'blue');
g.addColorStop(1,'red');
ctx.fillStyle=g;
ctx.arc(100,100,50,0,Math.PI*2,true);
ctx.fill();
</script>
    使用的径向渐变方法 
    context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    • x0：渐变的开始圆的 x 坐标
    • y0：渐变的开始圆的 y 坐标
    • r0：开始圆的半径
    • x1：渐变的结束圆的 x 坐标
    • y1：渐变的结束圆的 y 坐标
    • r1：结束圆的半径

绘制变形图

  1. 坐标变换
    可以通过变化canvas坐标来达到变换图形的效果，坐标有三种变换方式：
    • 平移：重新映射画布上的 (0,0) 位置 
      context.translate(x,y);
      x和y分别表示把坐标原点向x和y方向移动多少个单位，默认的单位是像素；
    • 缩放：缩放当前绘图至更大或更小 
      context.scale(x,y);
      x和y分别表示把x和y方向放大或缩小的倍数；
    • 旋转：旋转当前绘图 
      context.rotate(angle);
      angle表示旋转角度，以弧度计。如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
    示例 
    <!--放置canvas-->
<canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");
ctx.strokeStyle="green";
ctx.strokeRect(0,0,50,50);
//移动坐标
ctx.translate(10,10);
ctx.strokeRect(0,0,50,50);
//缩放2倍
ctx.scale(2,2);
ctx.strokeRect(10,10,50,50);
//旋转10度
ctx.rotate(10*Math.PI/180);
ctx.strokeRect(10,10,50,50);
</script>
    绘制的图形

  2. 坐标变换和路径结合的使用
    路径一旦绘制好后是不会随着坐标变换而变换的，如 
    var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");
//坐标变换前的路径
ctx.moveTo(0,0);
ctx.lineTo(100,20);
ctx.lineTo(20,80);
//变换坐标
ctx.rotate(20*Math.PI/180);
//为路径填色
ctx.strokeStyle="green";
ctx.stroke();

//坐标变换后绘制的图像，路径与上一路径相同
ctx.strokeStyle="red";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,20);
ctx.lineTo(20,80);
ctx.stroke();
    绘制的图像

    可见坐标变换对路径是没影响的，一般这种情况我们会把绘图操作封装成一个函数，方便坐标变换后操作。 
    var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");

doPic(ctx,"green");
ctx.rotate(20*Math.PI/180);
doPic(ctx,"red");
ctx.rotate(20*Math.PI/180);
doPic(ctx,"blue");

function doPic(ctx,color){	
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(100,20);
	ctx.lineTo(20,80);
	ctx.strokeStyle=color;
	ctx.stroke();	
}
  3. 矩阵变换
    如果上述都不能满足需求，HTML5还提供一种更复杂的变化：矩阵变换，这块牵涉到矩阵的数学知识，稍后单一节示例。

图像组合

通常当绘制的图像重叠时将以绘制的先后顺序来处理重叠的部分，但HTML5提供了globalCompositeOperation 选项来设置如何处理重叠。 

<canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
//获取context
var ctx=canvas.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";	
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);	
ctx.fillStyle="red";

ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50);	
</script>

绘制的图像

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

  • 源图像 = 您打算放置到画布上的绘图。
  • 目标图像 = 您已经放置在画布上的绘图。

属性值和描述

  • source-over：默认。在目标图像上显示源图像。
  • source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
  • source-in：在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
  • source-out：在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
  • destination-over：在源图像上方显示目标图像。
  • destination-atop：在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
  • destination-in：在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
  • destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
  • lighter：显示源图像 + 目标图像。
  • copy：显示源图像。忽略目标图像。
  • source-over：使用异或操作对源图像与目标图像进行组合。

绘制阴影

HTML5给添加阴影也非常简单，主要涉及到下面几个属性：

  • shadowColor：设置或返回用于阴影的颜色，如果取消只需设置为rgba(0,0,0,0)；
  • shadowBlur：设置或返回用于阴影的模糊级别，一般设置在0-10之间；
  • shadowOffsetX：设置或返回阴影距形状的水平距离；
  • shadowOffsetY：设置或返回阴影距形状的垂直距离；
ctx.fillStyle="blue";
ctx.shadowColor="#ccc";
ctx.shadowBlur=5;
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=10;
ctx.fillRect(10,10,60,60);
ctx.fillRect(80,80,60,60);

使用图片

    1. 绘制图片
      插入图片的方法只有一个，但是有三个重载方法，具体如下： 
      context.drawImage (image, dx, dy)
context.drawImage (image, dx, dy, dw, dh)
context.drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh)
      image是一个Image对象，用来装载图像文件，而其他参数参考下图：

      示例 
      <canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;">不支持canvas.</canvas>
<script type="text/javascript">
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");
var img=new Image();
img.src="p.jpg";
ctx.drawImage(img,0,0);
</script>
      但这样有时可能并不能绘制出图片，因为当image的src设置好后，但由于网络或图片过大导致不能及时加载，所以一般我们会在image的onload事件中操作 
      <canvas id="mycanvas" width="300" height="200" style="border:1px solid #ccc;">不支持canvas.</canvas>
<script type="text/javascript">
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");
var img=new Image();
img.src="p.jpg";
img.onload=function(){
	ctx.drawImage(img,0,0); 
	ctx.drawImage(img,10,10,50,50,250,0,50,50);
}
      绘制的图片如：
      2. 图像平铺 HTML5提供了一个非常方便的方法
createPattern(image, repetitionStyle)
      创建并返回一个 CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域，可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。repetitionStyle 说明图像如何贴图。可能的值如下所示：
      • "repeat" - 在各个方向上都对图像贴图。默认值。
      • "repeat-x" - 只在 X 方向上贴图。
      • "repeat-y" - 只在 Y 方向上贴图。
      • "no-repeat" - 不贴图，只使用它一次。
      示例
img.onload=function(){
	var ptt=ctx.createPattern(img,'repeat');
	ctx.fillStyle=ptt;
	ctx.fillRect(0,0,300,200);
}

  1. 裁剪
    clip() 方法从原始画布中剪切出任意形状和尺寸。
    一旦再勾画出路径后调用clip方法，则所有只有的绘图都会被限制在这个路径区域，从而达到裁剪的效果，可以结合save和restore方法。 
    img.onload=function(){	
	ctx.beginPath();
	ctx.arc(60,60,50,0,Math.PI*2,true);	
	ctx.clip();
	ctx.drawImage(img,0,0);
}
  2. 像素
    html5还有一个令人赞叹的技术就是可以处理像素，这设计到两个API： 
    var imgData=context.getImageData(x,y,width,height);
    • x - 开始复制的左上角位置的 x 坐标。
    • y - 开始复制的左上角位置的 y 坐标。
    • width - 将要复制的矩形区域的宽度。
    • height - 将要复制的矩形区域的高度。
    getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。对于 ImageData 对象中的每个像素，都存在着四方面的信息，即rgba 值：
    • r - 红色 (0-255)
    • g - 绿色 (0-255)
    • b - 蓝色 (0-255)
    • a - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
    color/alpha 以数组形式存在储于 ImageData对象的 data 属性中，形式如[r1,g1,b1,a1,r2,g2,b2,a2,....]。 
    context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
    • imgData - 规定要放回画布的 ImageData 对象。
    • x - ImageData 对象左上角的 x 坐标，以像素计。
    • y - ImageData 对象左上角的 y 坐标，以像素计。
    • dirtyX - 可选。水平值（x），以像素计，在画布上放置图像的位置。
    • dirtyY - 可选。水平值（y），以像素计，在画布上放置图像的位置。
    • dirtyWidth - 可选。在画布上绘制图像所使用的宽度。
    • dirtyHeight - 可选。在画布上绘制图像所使用的高度。
    putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
    示例：我们把图片上的一部分颜色取反，并把透明度降到60%： 
    img.onload=function(){	
	ctx.drawImage(img,0,0);
	var imgData=ctx.getImageData(10,10,80,80);
	for(var i=0;i<imgData.data.length;i+=4){
		imgData.data[i]=255-imgData.data[i+2];
		imgData.data[i+1]=255-imgData.data[i+1];
		imgData.data[i+2]=255-imgData.data[i];
		imgData.data[i+3]=imgData.data[i+3]*0.6;
	}
	ctx.putImageData(imgData,150,100);
}

    PS：在chrome等浏览器中这个API函数设计到跨域的问题，因此不能通过本地浏览(即file:///)，需要通过webserver(即http://)才能看到效果，否则报类似下面的异常：

    但firefox是好用的。

绘制文字

在canvas中也可以绘制文字，这涉及到两个API： 

context.fillText(text,x,y,maxWidth);
context.strokeText(text,x,y,maxWidth);
  • text - 规定在画布上输出的文本。
  • x - 开始绘制文本的 x 坐标位置（相对于画布）。
  • y - 开始绘制文本的 y 坐标位置（相对于画布）。
  • maxWidth - 可选。允许的最大文本宽度，以像素计。

在绘制之前可以先设置文字的相关属性：

  • font属性：设置文字的字体，语法与 CSS font 属性相同，可以按顺序设置font-style、font-variant、font-weight、font-size/line-height、font-family；
  • textAlign属性：设置文字的水平对齐方式，可选值start、end、left、right、center，默认是start；
  • textBaseline属性：设置文字的垂直对齐方式，可选值top、hanging、middle、alphabetic、ideographic、bottom，默认是alphabetic；

有时为了方便定位，需要获取文字的宽度，html5提供了一个API:

context.measureText(text)

返回的TextMetrics对象的width属性表示使用当前指定的字体后文字的总长度。

ctx.font="italic 30px sans-serif";
ctx.textBaseline="top";
ctx.fillStyle="red";
var txt='爱我中华';
ctx.fillText(txt,0,0);
var tml = ctx.measureText(txt);
ctx.strokeStyle="green";
ctx.strokeText(txt,tml.width+20,0);

善后工作

  1. 保存及恢复状态
    在绘制过程中，可能临时要改变一下属性设置，当临时绘制结束又想回到之前的状态，这就涉及到恢复，涉及到两个API： 
    save() //把当前环境的状态压入栈
restore() //状态出栈
    示例 
    ctx.fillText(txt,0,0);
ctx.save();//状态入栈
ctx.fillStyle="green";
ctx.textBaseline="bottom";
ctx.fillText(txt,0,80);
ctx.restore();//状态出栈
ctx.fillText(txt,0,120);
  2. 保存文件
    在canvas绘制后可以使用toDataURL方法把它保存成浏览器能识别的data URL数据 
    ctx.font="italic 30px sans-serif";
ctx.textBaseline="top";
ctx.fillStyle="red";
var txt='爱我中华';
ctx.fillText(txt,0,0);

document.getElementById("img").src=mycanvas.toDataURL("image/jpeg");
    data URL是目前大多数浏览器能够识别的一种base64编码的URL，主要用于小型的、可以在网页中直接嵌入的数据，格式类似“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAA....”
  3. 简单动画
    可以在canvas重复绘制、擦除、绘制的动作来实现动画，这其中涉及到一个擦除的API 
    context.clearRect(x,y,width,height);
    和setInterval函数 
    setInterval(code,millisec[,"lang"])
    setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    例如我们来绘制一个运动的小圆： 
    var i=0;
var intervalId=setInterval(doarc,1000);

function doarc(){
	ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
	ctx.beginPath();
	ctx.arc(i,i,20,20,Math.PI*2,true);
	ctx.fillStyle="blue";
	ctx.fill();
	i+=30;
	if(i>200){clearInterval(intervalId);}
}

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhaiqianfeng/p/4621670.html