本文详细介绍了HTML5 Canvas元素的基本用法，包括如何在Canvas上绘制图形、路径、文本，以及如何应用变换、渐变填充和图像处理。同时，文章还探讨了Canvas的状态保存与恢复、图像绘制和图形组合等高级主题。
canvas 元素：
canvas 元素是 HTML5 新增的专门用来绘制图形的元素。canvas 元素是一块无色透明的区域，本身只是一个容器，开发者通过 JavaScript 脚本在区域上实现任意绘图。
canvas 元素的属性：
canvas 元素只有两个可选的属性 width、height，如果不设置，则默认 width 为 300，height 为 150，单位都是 px。
<canvas id=”mycanvas” width=“600” height=“300”>
// 替代内容。如果浏览器不支持 canvas 元素，会显示替代内容；如果支持，会忽略替代内容，正常渲染 canvas 元素。
您的浏览器不支持 canvas 元素，请更新或更换您的浏览器。
</canvas>
canvas 对象方法：
-
toDataURL(type, encoderOptions)：用于将 canvas 对象转换为 base64 编码。toDataURL()方法是画布元素自身的方法，而非画布上下文对象的方法。参数：
- type：指定转换为 base64 编码后图片的格式。默认为
image/png格式。 - encoderOptions：用于设置转换为 base64 编码后图片的质量，取值范围为 0-1，超出取值范围用默认值 0.92 代替。
- type：指定转换为 base64 编码后图片的格式。默认为
-
toBlob()：用于将 canvas 对象转换为 Blob 对象。
判断浏览器是否支持 canvas 元素：
if (canvas.getContext){
// drawing code here
} else {
// canvas-unsupported code here
}
使用方法:
- 在 HTML 页面的
<body></body>元素中添加<canvas></canvas>元素。<canvas id=”mycanvas”></canvas> - 通过 id 获取页面中的 canvas 元素。
window.onload=function(){ var canvas = document.getElementById(“mycanvas”); } - 通过 canvas 元素的
getContext()方法来获取其上下文 Context 对象，以获取允许进行绘制的 2D 环境。if(!canvas.getContext) return; var context = canvas.getContext(“2d”); - 使用 JavaScript 脚本来进行绘制。
context.fillStyle=’#fff000’;//填充样式 context.fillRect(50,25,100,50);//绘制矩形
绘制矩形：
canvas 只支持一种原生的图形绘制，即矩形，其他图形都至少需要生成一种路径。canvas 提供了三种绘制矩形的方法：
fillRect(x,y,width,height)：绘制一个填充的矩形，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。strokeRect(x,y,width,height)：绘制一个矩形的边框，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。clearRect(x,y,width,height)：清除指定的矩形区域，这块区域就会变得完全透明，前两个参数是矩形的左上角的坐标，后两个参数是矩形的宽高。
context.fillRect(10, 10, 100, 50);
context.strokeRect(10, 70, 100, 50);
context.clearRect(15, 15, 50, 25);
绘制路径：
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
一般来说，画画之前可以先在画纸上绘制出一副草稿图，在完成时才把图形描边出来和填充颜色上去。
canvas 画布的绘图过程也不例外。把在画布间的草稿图叫做路径，在画布的绘图方法中，基本上都是描绘路径的方法，仅仅调用这些方法画布是不会显示图像的；要把画布内容呈现，必须需要调用stroke()或fill()填充图形。
属性：
-
lineWidth：线的宽度。
-
lineCap：线的端点处的样式。属性值有 butt、round 半圆、squared 方形，默认是 butt。
-
lineJoin：线的连接处的样式。miter 尖角、round 圆角 、bevel 斜角 ，默认是 miter。
-
strokeStyle：描边的样式；fillStyle：填充的样式。
-
绘制阴影：必须位于
fill()方法之前。- shadowColor：设置阴影颜色。
- shadowBlur：设置阴影模糊度，数字越大越模糊。
- shadowOffsetX：设置阴影与原图的水平偏移距离。
- shadowOffsetY：设置阴影与原图的垂直偏移距离。
-
globalAlpha：绘制透明度。属性值必须是位于 0.0（完全透明）与 1.0（完全不透明）之间的数字。必须位于
fill()方法之前。
方法：
beginPath()：新建一条路径。beginPath()就是告诉画布：我要开始画草稿了，请把之前的草稿都清除掉。beginPath()会把之前的路径都清空掉，重新开始新路径。context.moveTo(50, 50); context.lineTo(250, 50); context.moveTo(50, 100); context.lineTo(250, 100); context.stroke();不调用
beginPath()，两条直线都绘制出来了。
context.beginPath(); context.moveTo(50, 50); context.lineTo(250, 50); context.beginPath(); context.moveTo(50, 100); context.lineTo(250, 100); context.stroke();第二次调用
beginPath()时清除了第一条线段的直线，没有草稿了，所以无法描边。
context.moveTo(50, 50); context.lineTo(250, 50); context.stroke(); context.moveTo(50, 100); context.lineTo(250, 100); context.stroke();能看得出，第一条直线的颜色比第二条黑。第一次调用
stroke()时绘制了第一条直线；接下来没有调用beginPath()，于是第一条直线的路径一直保留着；然后添加了第二条直线，又再次调用了stroke()，画布会再沿着第一条直线描绘一次，然后再描绘第二条直线。所以第一条的颜色会比第二条的看起来更深。
closePath()：闭合路径，创建从当前点到开始点的路径。moveTo(x,y)：把画笔移动到指定的坐标(x,y)，相当于设置路径的起始点坐标。lineTo(x,y)：确定目标点。以上下文点为起点，到指定的点之间画一条直线。arcTo()：在画布上创建介于两个切线之间的弧线 ，前面四个参数是两个点的坐标，最后一个参数是参数圆的半径。quadraticCurveTo()：绘制二次贝塞尔曲线，每条曲线由一个上下文点，一个控制点，一个终止点来定义。bezierCurveTo()：绘制三次贝塞尔曲线，每条曲线由一个上下文点，两个控制点，一个终止点来定义。有六个参数，前四个参数是两个控制点的坐标，后两个参数是终止点的坐标。arc()：绘制圆。rect(x,y,width,height)：绘制矩形，前两个参数为左上角的坐标，后两个参数为宽高。stroke()：通过线条来绘制图形轮廓，默认黑色。fill()：通过填充路径的内容区域生成实心的图形，默认黑色。
绘制直线:
context.beginPath();
context.moveTo(200,canvas.height/2);
context.lineTo(canvas.width-90,canvas.height/2);
context.lineWidth=20;
context.strokeStyle=”red”;
context.lineCap=”round”;
context.stroke();
绘制弧线和曲线:
// 弧线
context.beginPath();
context.moveTo(20,20);//创建起始点
context.arcTo(200,20,200,100,50);//创建弧。前面四个参数是两个点的坐标，最后一个参数是参数圆的半径
context.stroke();
//三次贝塞尔曲线
context.beginPath();
context.moveTo(200,canvas.height/2);
context.bezierCurveTo(280,0,380,150,380,250);//前两个参数是控制点坐标，后两个参数是终止点坐标
context.stroke();
绘制矩形:
context.rect(10,50,200,100);
context.fillStyle=”red”;
context.strokeStyle=”blue”;
context.fill();
context.stroke();
绘制圆：
var centerx=canvas.width/2;
var centery=canvas.height/3;//设置圆心的坐标
var radius=50;//设置圆的半径
context.arc(centerx,centery,radius,0,2*Math.PI,fasle);//第四，第五个参数是起始弧度和结束弧度，弧度以 x 轴正方向为基准。false 为顺时针，true 为逆时针，第六个参数是可选的，默认为 false
context.stroke();
绘制文本：
属性：
- strokeStyle、fillStyle：设置文本颜色。
- font：设置字体，大小和样式。
- textAlign：设置文本的对齐方式，属性值有 start、end、left、center、right，以 x 坐标所对应的那条线为参考线。
方法:
fillText(text,x,y)：绘制实心字体。参数 text 是绘制的文本的内容，x、y 是绘制的文本的起始位置。strokeText()：绘制空心字体。
var x=canvas.width/2;
var y=canvas.height/2;
context.font=”italc 20px Arial”
context.fillStyle=”red”;
context.fillText(“Hello”,x,y);
绘制图像：
drawImage(imageObj,x,y,width,height)。其中 imageObj 表示图像源；x、y 表示相对于 canvas 对象左上角位置的起始点坐标；width、height 表示尺寸大小。
var canvas=document.getElementById(“mycanvas”);
var context=canvas.getContext(“2d”);
var iamgeObj=new image();
imageObj.src=””;
imageObj.onload=function(){
context.drawImage(imageObj,10,10);
}
绘制线性渐变:
调用 createLinearGradient(x0,y0,x1,y1) 方法创建线性渐变对象。前两个参数为渐变的起点，后两个参数为渐变的终点。该对象可以作为 strokeStyle 或 fillStyle 属性的值，填充矩形、圆形、线条、文本等的颜色。
使用 addColorStop(index,color) 方法定义色标的位置并上色。第一个参数为渐变中色标的偏移量，需要设定为 0~1 之间的浮点数，第二个参数为颜色值。
var c=document.getElementById(“mycanvas”);
var context=c.getContext(“2d”);
var clg=context.createLinearGradient(0,0,0,200);
clg.addColorStop(0,”white”);
clg.addColorStop(0.5,”red”);
clg.addColorStop(1,”black”);
context.fillStyle=clg;
ctx.fillRect(20,20,150,100);
绘制径向渐变：
径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。调用 createRadialGradient() 方法创建径向渐变对象。有六个参数，前三个参数为第一个圆的圆心坐标和半径，后三个参数为第二个圆的圆心坐标和半径。第一个圆和第二个圆的圆心相同半径不同。该对象可以作为 strokeStyle 或 fillStyle 属性的值，填充矩形、圆形、线条、文本等的颜色。
调用 addColorStop() 方法定义色标的位置并上色。
绘制图案填充：
调用 createPattern((img,type) 方法创建一个图案填充对象。其中 type 为平铺类型：repeat、repeat-x、repeat-y 或 no-repeat。该对象可以作为 strokeStyle 或 fillStyle 属性的值，填充矩形、圆形、线条、文本等的颜色。
var c=document.getElementById(“mycanvas”);
var context=c.getContext(“2d”);
var img=documnet.getElementById(“mying”);
var pat=context.createPattern(img,type);
context.rect(0,0,500,200);
context.fillStyle=pat;
context.fill();
图形的组合与裁切:
图形的组合:
globalCompositeOperation 属性：设置如何将一个新的源图像绘制到已有的目标图像上。属性值有：
- source-over：源图像覆盖到目标图像上（默认）
- source-atop：只显示目标图像，以及覆盖在目标图像上的源图像的重叠部分。
- source-in：源图像覆盖在目标图像上，只显示源图像和目标图像的重叠部分，其余部分透明不可见。
- source-out：只显示源图像和目标图像不重叠的部分，目标图像和重叠部分透明不可见。
- destination-over：目标图像覆盖在源图像上。
- destination-atop：只显示源图像，以及覆盖在源图像上的目标图像的重叠部分。
- destination-in：目标图像覆盖在源图像上，只显示目标图像和源图像的重叠部分，其余部分透明不可见。
- destination-out：只显示目标图像和源图像不重叠的部分，源图像和重叠部分透明不可见。
- lighter：显示源图像+目标图像，重叠部分做加色处理(发白)。
- darker：显示源图像+目标图像，重叠部分做加色处理(发黑)。
- xor：显示源图像+目标图像，重叠部分变为透明。
- copy：只显示源图像。
//绘制的图形将画在现有画布之上
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="rgb(63,169,245)";
context.fillRect(50,50,100,100);
context.globalCompositeOperation="source-over"
context.fillStyle="rgb(255,123,172)";
context.fillRect(100,100,100,100);
图形的裁切:
使用 clip() 方法从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域，其他区域的内容不会被显示）。
可以在使用 clip() 方法之前通过 save() 方法对当前画布区域进行保存，并在以后的任意时间通过restore() 方法对其进行恢复。
//不使用 clip()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
// 使用clip()
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
canvas 的变换:
- 移动坐标空间：使用
translate()方法，将绘图原点横向和纵向移动到指定的位置(x,y)，表现为整张图像的移动。 - 旋转坐标空间：使用
rotate()方法，接受一个以弧度为单位的旋转参数，以坐标原点为圆心进行旋转。context.rotate(0.25*Math.PI); - 缩放图形：使用
scale()方法，参数 x、y 分别代表横向和纵向的缩放比例。两个参数都是浮点数，1.0 表示不缩放，小于 1.0 表示缩小，大于 1.0 表示放大。
canvas 状态的保存和恢复:
- 保存 canvas 状态：使用
save()方法实现对 canvas 状态的保存。context.save(); - 恢复 canvas 状态：使用
restore()方法实现对 canvas 状态的恢复。保存与恢复一步对应一步。
扫一扫
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
