最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5中Canvas的使用例子
时间:2016-01-29 编辑:简简单单 来源:一聚教程网
通常使用
1,所有的合成操作及其效果
11种合成方式如下:source-over、source-in、soruce-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor。
下面演示效果(先绘制一个矩形 ,再在上面绘制一个圆形)
2,如何设置合成操作方式
要改变
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//绘制矩形
context.fillStyle = "blue";
context.fillRect(15,15,100,100);
//选择globalCompositeOperation
context.globalCompositeOperation = "source-atop";
//在上方绘制圆形
context.fillStyle = "red";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.fill();
相关文章
- html5 canvas 详细使用教程 02-10
- html5中canvas 圆周运动和椭圆运动例子 08-21
- html5中canvas脉冲运动示例 08-21
- html5中canvas正弦波运动示例详解 08-21
- HTML5 Canvas画图板的例子 06-28
- HTML5 - Canvas动画效果的例子 02-25