當前位置：
首頁 >
html5 canvas 学习
發布時間：2025/5/22
27
豆豆
生活随笔
收集整理的這篇文章主要介紹了
html5 canvas 学习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 畫矩形
7
8 ctx.fillStyle="#ff0000";
9 ctx.fillRect(0,0,200,200);
10 畫線
11 ctx.moveTo(0,0);
12 ctx.lineTo(200,200);
13 ctx.stroke();
14 畫圓
15 ctx.fillStyle="#ff0000";//實心顏色
16 ctx.beginPath();
17 ctx.arc(100,100,50,0,Math.PI*2,true);
18 ctx.closePath();
19 ctx.fill();//填充顏色
20
21 畫三角形
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);起點
36 ctx.quadraticCurveTo(75,50,300,200);節點坐標，終點坐標|錨點坐標
37 ctx.stroke();
38
39
40 //三次貝塞爾曲線
41 ctx.bezierCurveTo(205,56,239,439,400,250); 第一個節點，第二個節點，錨點坐標
42
43 保存恢復canvas狀態
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();保存當前的狀態
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(); 恢復狀態,直接調用原來保存的樣式
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 旋轉
68 ctx.rotate(30*Math.PI/180); 參數是弧度
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();
?
轉載于:https://www.cnblogs.com/xiaozizi/p/5946578.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的html5 canvas 学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redis 配置文件 append on
- 下一篇： select、poll、poll的比较(