认识Canvas(四)

通过前面三篇的博文,我们基本上对canvas有了不少的了解,今天做一些小小的补充
( ^_^ )

基础API补充

  1. globalAlpha:绘制的图形的透明度(0-1之间的值)

  2. globalCompositeOperation:表示图形之间重叠的时候指定的操作:

  3. 参考文档:

    • https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing

    • 补充API

      1. source-over (default) 这是默认设置,新图形会覆盖在原有内容之上。
      2. destination-over 会在原有内容之下绘制新图形。
      3. source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
      4. destination-in 原有内容中与新图形重叠的部分会被保留,其它区域都变成透明的。
      5. source-out 结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
      6. destination-out 原有内容中与新图形不重叠的部分会被保留。
      7. source-atop 新图形中与原有内容重叠的部分会被绘制,并覆盖于原有内容之上。
      8. destination-atop 原有内容中与新内容重叠的部分会被保留,并会在原有内容之下绘制新图形
      9. lighter 两图形中重叠部分作加色处理。
      10. darker 两图形中重叠的部分作减色处理。
      11. xor 重叠的部分会变成透明。
      12. copy 只有新图形会被保留,其它都被清除掉。
  4. ctx.getImageData(x,y,width,height):返回一个ImageData对象,该对象中的data属性是一个数组,该数组中每4个元素表示一个像素点的rgba的值,width属性表示该区域的宽度,height表示该区域的高度

  5. rgba:就是在rgb的颜色的基础上,加上透明度,就组成了rgba的值

写了个小Canvas页面,大风车转呀转呀~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<style>
body{
position: relative;
}
canvas{
position:absolute;;
top: 0;
left: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="canvasBottom" width="800" height="600"></canvas>
<canvas width="800" height="600" id="canvasTop"></canvas>
</body>
<script src="jquery-2.1.4.js"></script>
<script>
var canvasTop = document.getElementById("canvasTop");
var ctxTop = canvasTop.getContext("2d");
var bigRadius = 250;
var smallRadius = 50;
var start = 2*Math.PI/3;
var start2 = 4*Math.PI/3;
var start3 = 2*Math.PI;
ctxTop.textAlign = "center";
ctxTop.textBaseline = "middle";
ctxTop.font = "18px Microsoft Yahei";
var timerFn = function () {
ctxTop.clearRect(0,0,canvasTop.width,canvasTop.width);
function smallCircle (start,color,text){
ctxTop.beginPath();
var x1 = Math.sin(-start)*bigRadius;
var y1 = Math.cos(-start)*bigRadius;
var x2 = 300+x1;
var y2 = 180-y1;
ctxTop.moveTo(x2,y2-50)
ctxTop.lineTo(300,150);
ctxTop.stroke();
ctxTop.beginPath();
ctxTop.arc(x2,y2,smallRadius,0,2*Math.PI);
ctxTop.fillStyle = color;
ctxTop.fill();
ctxTop.fillStyle = "black";
ctxTop.fillText(text,x2,y2);
}
smallCircle(start,"red","Angular");
smallCircle(start2,"pink","vue.js");
smallCircle(start3,"yellow","bootstarp");
start+=0.003*Math.PI;
start2+=0.003*Math.PI;
start3+=0.003*Math.PI;
}
var timer=setInterval(timerFn,20);
$("canvas").on("mouseenter",function(){
clearInterval(timer);
timer=setInterval(timerFn,5);
}).on("mouseleave",function(){
clearInterval(timer);
timer=setInterval(timerFn,20);
});
var canvasBottom = document.getElementById("canvasBottom");
var ctxBottom = canvasBottom.getContext("2d");
ctxBottom.moveTo(300,150);
ctxBottom.lineTo(270,600);
ctxBottom.lineTo(330,600);
ctxBottom.fillStyle = "green";
ctxBottom.fill();
ctxBottom.beginPath()
ctxBottom.arc(300,150,bigRadius,0,2*Math.PI);
ctxBottom.stroke();
</script>
</html>

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 基础API补充
  2. 2. 写了个小Canvas页面,大风车转呀转呀~~~