摘要:
HTML5规范已经完成了,互联网上已经有数不清的站点使用了HTML5。从现在开始研究HTML5,本文是自己在学习canvas过程中的记录,以备后需。
历史:
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于,HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
浏览器:
从图中可以看出IE9+都支持canvas。
API:
使用前,首先需要新建一个canvas网页元素。如下:
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器版本太低,不支持canvas! 3 </canvas>
如果浏览器不支持canvas标签,页面上就会显示‘您的浏览器版本太低,不支持canvas!’。每个canvas元素都有一个方法--getContext方法,返回一个用于在画布上绘图的环境。
1 var canvas = document.getElementById('myCanvas'); 2 canvas.getContext(contextID);
参数:
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d",它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
返回值:
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型(2 维、3 维)提供不同的环境。当前,唯一支持的是 "2d",它返回一个 CanvasRenderingContext2D 对象,该对象实现了一个画布所使用的大多数方法。
在画图之前先讲下坐标,每一个图的原点坐标(0,0)在图的左上角,x轴正方向水平向右,y轴正方向水平向下。
Demo:
1、线
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); // 开始 9 ctx.moveTo(20, 20); // 设置线的起点,坐标为(20,20) 10 ctx.lineTo(100, 100); // 设置线的终点,坐标为(100,100) 11 ctx.lineWidth = 5; // 设置线宽 12 ctx.strokeStyle = "#CC0000"; // 设置线的颜色 13 ctx.stroke(); // 进行线的着色 14 } 15 </script>
注意:moveTo和lineTo方法可以多次使用。最后可以用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,也可以使用一次lineto方法来封闭图形。
2、三角形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); //开始 9 ctx.lineWidth=3; //边框的宽度 10 ctx.moveTo(0,350); //三角型的顶点 11 ctx.lineTo(100,250); //三角型的顶点 12 ctx.lineTo(200,300); //三角型的顶点 13 ctx.closePath(); //可选步骤,关闭绘制的路径 14 ctx.strokeStyle = "#CC0000"; //设置线的颜色 15 ctx.stroke(); //边着色 16 } 17 </script>
3、正方型
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.moveTo(10,10); 10 ctx.lineTo(100,10); 11 ctx.lineTo(100,100); 12 ctx.lineTo(10,100); 13 ctx.lineTo(10,10); 14 ctx.strokeStyle="#CC0000"; 15 ctx.lineWidth=3; 16 ctx.stroke(); 17 } 18 </script>
4、矩形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; //设置矩形的填充色 9 ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高 10 } 11 </script>
5、空心矩
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.lineWidth = 5; 9 ctx.strokeStyle="#CC0000"; 10 ctx.strokeRect(10,10,200,100); //strokeRect(x, y, width, height),矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高 11 ctx.stroke(); 12 } 13 </script>
清楚填充矩形一部分
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; 9 ctx.fillRect(50, 50, 200, 100); 10 ctx.clearRect(100,50,50,50);//clearRect(x, y, width, height),清除矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高 11 } 12 </script>
6、圆形
填充圆
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false) 10 ctx.fillStyle = "#CC0000"; 11 ctx.fill(); 12 } 13 </script>
空心圆
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 10 ctx.lineWidth = 5; 11 ctx.strokeStyle = "#CC0000"; 12 ctx.stroke(); 13 } 14 </script>
7、绘制文本
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.font = "Bold 20px 雅黑"; // 设置字体 9 ctx.textAlign = "left"; // 设置对齐方式 10 ctx.fillStyle = "#CC0000"; // 设置填充颜色 11 ctx.fillText("你好!", 10, 50); // fillText(string, x, y)文本内容、起点的x坐标、y坐标 12 ctx.strokeStyle = '#CC0000'; 13 ctx.strokeText("你好!", 10, 100); // 绘制空心字 14 } 15 </script>
注意:fillText和strokeText方法不支持文本断行
8、渐变色
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createLinearGradient(0,0,170,0);// createLinearGradient(x1, y1, x2, y2)x1和y1是起点坐标,x2和y2是终点坐标。通过不同的坐标值,可以生成从上至下、从左到右的渐变等等。 9 grd.addColorStop(0,"black");// addColorStop(stop,color)stop介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。color在结束位置显示的 CSS 颜色值 10 grd.addColorStop("0.3","magenta"); 11 grd.addColorStop("0.5","blue"); 12 grd.addColorStop("0.6","green"); 13 grd.addColorStop("0.8","yellow"); 14 grd.addColorStop(1,"red"); 15 ctx.fillStyle=grd; 16 ctx.fillRect(20,20,150,100); 17 } 18 </script>
圆形渐
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x0,y0,r0,x1,y1,r1);x0渐变的开始圆的x坐标,y0 渐变的开始圆的y坐标,r0开始圆的半径,x1渐变的结束圆的x坐标,y1渐变的结束圆的y坐标,r1结束圆的半径 9 grd.addColorStop(0,"red"); 10 grd.addColorStop(1,"white"); 11 // Fill with gradient 12 ctx.fillStyle=grd; 13 ctx.fillRect(10,10,150,100); 14 } 15 </script>
边框渐变
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var gradient=ctx.createLinearGradient(0,0,170,0); 9 gradient.addColorStop("0","magenta"); 10 gradient.addColorStop("0.5","blue"); 11 gradient.addColorStop("1.0","red"); 12 13 // 用渐变进行填充 14 ctx.strokeStyle=gradient; 15 ctx.lineWidth=5; 16 ctx.strokeRect(20,20,150,100); 17 } 18 </script>
9、设置阴影
1 <canvas id="myCanvas" width="800" height="600"> 2 您的浏览器不支持canvas! 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.shadowOffsetX = 10; // 设置水平位移 9 ctx.shadowOffsetY = 10; // 设置垂直位移 10 ctx.shadowBlur = 5; // 设置模糊度 11 ctx.shadowColor = "#cc2111"; // 设置阴影颜色 12 ctx.fillStyle = "#CC0000"; 13 ctx.fillRect(10,10,200,100); 14 } 15 </script>
附录:
颜色、样式和阴影
属性 | 描述 |
---|---|
fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
shadowColor | 设置或返回用于阴影的颜色 |
shadowBlur | 设置或返回用于阴影的模糊级别 |
shadowOffsetX | 设置或返回阴影距形状的水平距离 |
shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
方法 | 描述 |
---|---|
createLinearGradient() | 创建线性渐变(用在画布内容上) |
createPattern() | 在指定的方向上重复指定的元素 |
createRadialGradient() | 创建放射状/环形的渐变(用在画布内容上) |
addColorStop() | 规定渐变对象中的颜色和停止位置 |
线条样式
属性 | 描述 |
---|---|
lineCap | 设置或返回线条的结束端点样式 |
lineJoin | 设置或返回两条线相交时,所创建的拐角类型 |
lineWidth | 设置或返回当前的线条宽度 |
miterLimit | 设置或返回最大斜接长度 |
矩形
方法 | 描述 |
---|---|
rect() | 创建矩形 |
fillRect() | 绘制“被填充”的矩形 |
strokeRect() | 绘制矩形(无填充) |
clearRect() | 在给定的矩形内清除指定的像素 |
路径
方法 | 描述 |
---|---|
fill() | 填充当前绘图(路径) |
stroke() | 绘制已定义的路径 |
beginPath() | 起始一条路径,或重置当前路径 |
moveTo() | 把路径移动到画布中的指定点,不创建线条 |
closePath() | 创建从当前点回到起始点的路径 |
lineTo() | 添加一个新点,然后在画布中创建从该点到最后指定点的线条 |
clip() | 从原始画布剪切任意形状和尺寸的区域 |
quadraticCurveTo() | 创建二次贝塞尔曲线 |
bezierCurveTo() | 创建三次方贝塞尔曲线 |
arc() | 创建弧/曲线(用于创建圆形或部分圆) |
arcTo() | 创建两切线之间的弧/曲线 |
isPointInPath() | 如果指定的点位于当前路径中,则返回 true,否则返回 false |
转换
方法 | 描述 |
---|---|
scale() | 缩放当前绘图至更大或更小 |
rotate() | 旋转当前绘图 |
translate() | 重新映射画布上的 (0,0) 位置 |
transform() | 替换绘图的当前转换矩阵 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
文本
属性 | 描述 |
---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
方法 | 描述 |
---|---|
fillText() | 在画布上绘制“被填充的”文本 |
strokeText() | 在画布上绘制文本(无填充) |
measureText() | 返回包含指定文本宽度的对象 |
图像绘制
方法 | 描述 |
---|---|
drawImage() | 向画布上绘制图像、画布或视频 |
像素操作
属性 | 描述 |
---|---|
width | 返回 ImageData 对象的宽度 |
height | 返回 ImageData 对象的高度 |
data | 返回一个对象,其包含指定的 ImageData 对象的图像数据 |
方法 | 描述 |
---|---|
createImageData() | 创建新的、空白的 ImageData 对象 |
getImageData() | 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 |
putImageData() | 把图像数据(从指定的 ImageData 对象)放回画布上 |
合成
属性 | 描述 |
---|---|
globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
其他
方法 | 描述 |
---|---|
save() | 保存当前环境的状态 |
restore() | 返回之前保存过的路径状态和属性 |
createEvent() | |
getContext() | |
toDataURL() |
来源:https://www.cnblogs.com/xiyangbaixue/p/4045603.html