您的位置：首页 > 其它

canvas应用图像与色彩

2013-01-05 19:12 281 查看

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>

效果为：

drawImage(image, x, y, width, height)：

后面的width与height表示图片的宽与高。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：

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>

效果为：

6.也可以通过rgba()设置透明度，rgba(r,g,b,a)中a,b,c分别表示三种颜色的分量，a表示透明度，

从0.0-1.0。

7.可以通过一系列属性来设置线的样式：

lineWidth = value;//设置线的粗细，属性值必须为正数，默认值是1

lineCap = type;//线段端点显示的样子。它可以为：butt，round 和 square。默认原来butt。

最左边的线用了默认的

butt

。可以注意到它是与辅助线齐平的。中间的是

round

的效果，端点处加上了半径为一半线宽
的半圆。右边的是

square

的效果，端点处加上了等宽且高度为一半线宽的方块。

lineJoin = type;//图形中两线段连接处所显示的样子。可以是：round, bevel ,miter。默认是 miter。

最上面一条是 round 的效果，边角处被磨圆了，圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候，线段会在连接处外侧延伸直至交于一点，延伸效果受到 miterLimit 属性的制约。

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>

背景图片为：

效果为：

9.阴影 Shadows：

shadowOffsetX = float

shadowOffsetY = float
shadowBlur = float
shadowColor = 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://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Canvas drawImage Shadows 图像色彩

相关文章推荐

新的分享

章节导航