html5 canvas 学习
生活随笔
收集整理的這篇文章主要介紹了
html5 canvas 学习
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 <canvas id="mycanvas"></canvas>
2 var c=document.getElementById("mycanvas");
3 c.width=500;
4 c.height=500;
5 var ctx=c.getContext("2d");
6 畫(huà)矩形
7
8 ctx.fillStyle="#ff0000";
9 ctx.fillRect(0,0,200,200);
10 畫(huà)線
11 ctx.moveTo(0,0);
12 ctx.lineTo(200,200);
13 ctx.stroke();
14 畫(huà)圓
15 ctx.fillStyle="#ff0000";//實(shí)心顏色
16 ctx.beginPath();
17 ctx.arc(100,100,50,0,Math.PI*2,true);
18 ctx.closePath();
19 ctx.fill();//填充顏色
20
21 畫(huà)三角形
22 ctx.strokeStyle="#ff0000";框架顏色，線的顏色
23 ctx.beginPath();
24 ctx.moveTo(25,25);
25 ctx.lineTo(150,25);
26 ctx.lineTo(25,150)
27 ctx.closePath();
28 ctx.stroke();
29
30 貝塞爾曲線 www.j--d.com/bezier
31
32 ctx.lineWidth=6;
33 ctx.strokeStyle="#ff0000";
34 ctx.beginPath();
35 ctx.moveTo(0,200);起點(diǎn)
36 ctx.quadraticCurveTo(75,50,300,200);節(jié)點(diǎn)坐標(biāo)，終點(diǎn)坐標(biāo)|錨點(diǎn)坐標(biāo)
37 ctx.stroke();
38
39
40 //三次貝塞爾曲線
41 ctx.bezierCurveTo(205,56,239,439,400,250); 第一個(gè)節(jié)點(diǎn)，第二個(gè)節(jié)點(diǎn)，錨點(diǎn)坐標(biāo)
42
43 保存恢復(fù)canvas狀態(tài)
44 ctx.fillStyle="#ff0000";
45 ctx.strokeStyle="#00ff00";
46 cxt.fillRect(20,20,200,100);
47 ctx.strokeRect(20,20,200,100);
48 ctx.fill();
49 ctx.stroke();
50 ctx.save();保存當(dāng)前的狀態(tài)
51
52 ctx.fillStyle="#ffffff";
53 ctx.strokeStyle="#0000ff";
54 ctx.fillRect(200,200,100,50);
55 ctx.strokeRect(200,200,100,50);
56 ctx.fill();
57 ctx.stroke();
58
59 ctx.restore(); 恢復(fù)狀態(tài),直接調(diào)用原來(lái)保存的樣式
60 ctx.fillRect(300,300,100,100);
61 ctx.strokeRect(300,300,100,100);
62
63 縮放
64 ctx.scale(0.5,3); 寬度，高度
65 位移
66 ctx.translate(100,50);
67 旋轉(zhuǎn)
68 ctx.rotate(30*Math.PI/180); 參數(shù)是弧度
69 1度=pi/180
70
71 圖形的組合與裁切 www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
72
73 ctx.fillStyle="#ff0000";
74 ctx.fillRect(50,25,100,100);
75 ctx.globalCompositeOperation="source-in";
76 ctx.fillStyle="#00ff00";
77 ctx.beginPath();
78 ctx.arc(150,125,50,0,Math.PI*2,true);
79 ctx.closePath();
80 ctx.fill();
?
轉(zhuǎn)載于:https://www.cnblogs.com/xiaozizi/p/5946578.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的html5 canvas 学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： redis 配置文件 append on
- 下一篇： select、poll、poll的比较(