1.canvas中可以引入图片,可以通过获取本页面中的图片也可以通过javascript新建图片。
2.获得图片后就可以把图片渲染到canvas里。
3.drawImage(image, x, y):
image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。
例子:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"), ctx=c.getContext("2d"); var img = new Image(); img.src = 'https://developer.mozilla.org/samples/canvas-tutorial/images/backdrop.png'; img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } </script> </body> </html>
效果为:
![](https://img-my.csdn.net/uploads/201301/05/1357384901_6658.jpg)
drawImage(image, x, y, width, height):
后面的width与height表示图片的宽与高。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight):
![](https://img-my.csdn.net/uploads/201301/05/1357384954_1856.jpg)
4.一旦设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果要给每个图形上不同的颜色,则需要重新设置 fillStyle 或 strokeStyle 的值。
5.globalAlpha设置透明,比如:
例子:
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"), ctx=c.getContext("2d"); ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; ctx.fillRect(75,0,75,75); ctx.fillStyle = '#09F'; ctx.fillRect(0,75,75,75); ctx.fillStyle = '#F30'; ctx.fillRect(75,75,75,75); ctx.fillStyle = '#FFF'; ctx.globalAlpha = 0.2;//设置透明度 for (var i=0;i<7;i++){ ctx.beginPath(); ctx.arc(75,75,10+10*i,0,Math.PI*2,true); ctx.fill(); } </script> </body> </html>
效果为:
![](https://img-my.csdn.net/uploads/201301/05/1357385003_8299.jpg)
6.也可以通过
rgba()设置透明度,
rgba(r,g,b,a)中a,b,c分别表示三种颜色的分量,a表示透明度,
从0.0-1.0。
7.可以通过一系列属性来设置线的样式:
lineWidth = value;//设置线的粗细,属性值必须为正数,默认值是1lineCap = type;//线段端点显示的样子。它可以为:butt,round 和 square。默认原来butt。
最左边的线用了默认的
butt
。可以注意到它是与辅助线齐平的。中间的是
round
的效果,端点处加上了半径为一半线宽 的半圆。右边的是
square
的效果,端点处加上了等宽且高度为一半线宽的方块。
![](https://img-my.csdn.net/uploads/201301/05/1357385028_6492.jpg)
lineJoin = type;//图形中两线段连接处所显示的样子。可以是:round, bevel ,miter。默认是 miter。
最上面一条是 round 的效果,边角处被磨圆了,圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候,线段会在连接处外侧延伸直至交于一点,延伸效果受到 miterLimit 属性的制约。
![](https://img-my.csdn.net/uploads/201301/05/1357385046_6690.jpg)
miterLimit = value;//设定外延交点与连接点的最大距离,如果交点距离大于此值,连接效果会变成了 bevel.
8.createPattern(image,type)
Image 可以是 Image 对象的引用或者 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y , no-repeat。
例子:
<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById("myCanvas"),ctx=c.getContext("2d"),img = new Image();img.src = 'https://developer.mozilla.org/files/222/Canvas_createpattern.png';img.onload = function(){var ptrn = ctx.createPattern(img,'repeat');ctx.fillStyle = ptrn;ctx.fillRect(0,0,300,300);}</script></body></html>
背景图片为:
效果为:
![](https://img-my.csdn.net/uploads/201301/05/1357385068_4806.jpg)
![](https://img-my.csdn.net/uploads/201301/05/1357385087_5433.jpg)
9.阴影 Shadows:
shadowOffsetX = float
shadowOffsetY = floatshadowBlur = floatshadowColor = color
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,他们默认都是 0。
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor 用于设定阴影效果的延伸,值可以是标准的 CSS 颜色值,默认是全透明的黑色。
例子:
<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById("myCanvas"),ctx=c.getContext("2d");ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowBlur = 2;ctx.shadowColor = "rgba(0, 0, 0, 0.5)";ctx.font = "20px Times New Roman";ctx.fillStyle = "Black";ctx.fillText("Sample String", 5, 30);</script></body></html>
效果为:
![](https://img-my.csdn.net/uploads/201301/05/1357385105_5059.jpg)