<!DOCTYPE html>
02.<html lang="en">
03.<head>
04. <meta charset="UTF-8">
05. <title>使用Canvas绘图</title>
06. <style>
07. canvas{
08. border: 1px solid dodgerblue;
09. }
10. </style>
11.</head>
12.<body>
13.<canvas id="drawing1" width="200" height="200">您的浏览器不支持canvas。</canvas>
14.<canvas id="drawing2" width="200" height="200">您的浏览器不支持canvas。</canvas>
15.<canvas id="drawing3" width="200" height="200">您的浏览器不支持canvas。</canvas>
16.<canvas id="drawing4" width="200" height="200">您的浏览器不支持canvas。</canvas>
17.<canvas id="drawing5" width="200" height="200">您的浏览器不支持canvas。</canvas>
18.<canvas id="drawing6" width="600" height="200">您的浏览器不支持canvas。</canvas>
19.<img src="result.png" id="result" hidden/>
20.<script src="l15.js"></script>
21.</body>
22.</html>
[javascript] view plain copy
01./**
02. * 使用Canvas绘图
03. */
04.
05./**
06. * 15.1 基本用法
07. */
08. //绘制图形
09.var drawing1=document.getElementById("drawing1");
10.//确定浏览器支持<canvas>元素
11.if(drawing1.getContext){
12. var context1=drawing1.getContext("2d");
13. var imageElem=document.getElementById("result");
14. context1.drawImage(imageElem,10,10,180,180);
15.}
16.
17./**
18. *15.2 2D上下文
19. */
20.//15.2.1 填充和描边
21.//15.2.2 绘制矩形
22.var drawing2=document.getElementById("drawing2");
23.if(drawing2.getContext){
24. var context2=drawing2.getContext("2d");
25. //绘制矩形
26. context2.fillStyle="#ff0000";
27. context2.fillRect(10,10,50,50);
28. //绘制半透明的蓝色矩形
29. context2.fillStyle="rgba(0,0,255,0.5)";
30. context2.fillRect(50,50,50,50);
31. //绘制红色描边矩形
32. context2.strokeStyle="#ff0000";
33. context2.strokeRect(130,10,50,50);
34. //绘制半透明的蓝色描边矩形
35. context2.strokeStyle="rgba(0,0,255,0.5)";
36. context2.strokeRect(130,70,50,50);
37. //描边线条的属性有lineWidth、lineCap、lineJoin
38. context2.lineWidth=2;
39. //在两个矩形重叠的地方清除一个小矩形
40. context2.clearRect(50,50,10,10);
41.}
42.//15.2.3 绘制路径
43.//15.2.4 绘制文本
44.//15.2.5 变换
45.//绘制一个时钟表盘：
46.var drawing3=document.getElementById("drawing3");
47.if(drawing3.getContext){
48. var context3=drawing3.getContext("2d");
49. //开始路径
50. context3.beginPath();
51. //绘制外圆
52. context3.arc(100,100,99,0,2*Math.PI,false);
53. //绘制内圆
54. context3.moveTo(194,100);
55. context3.arc(100,100,94,0,2*Math.PI,false);
56. //绘制文本
57. context3.font="bold 14px Arial";
58. context3.textAlign="center";
59. context3.textBaseline="middle";
60. context3.fillText("12",100,20);
61. context3.fillText("3",180,100);
62. context3.fillText("6",100,180);
63. context3.fillText("9",20,100);
64. //变换原点
65. context3.translate(100,100);
66. //旋转表针
67. context3.rotate(1);
68. //绘制分针
69. context3.moveTo(0,0);
70. context3.lineTo(0,-85);
71. //绘制时针
72. context3.moveTo(0,0);
73. context3.lineTo(-65,0);
74. //描边路径
75. context3.stroke();
76.}
77.//15.2.6 绘制图像
78.//15.2.7 阴影
79.var context4=document.getElementById("drawing4").getContext("2d");
80.//设置阴影
81.context4.shadowOffsetX=5;
82.context4.shadowOffsetY=5;
83.context4.shadowBlur=4;
84.context4.shadowColor="rgba(0,0,0,0.5)";
85.//绘制红色矩形
86.context4.fillStyle="#ff0000";
87.context4.fillRect(10,10,50,50);
88.//绘制蓝色矩形
89.context4.fillStyle="rgba(0,0,255,1)";
90.context4.fillRect(30,30,50,50);
91.//15.2.8 渐变
92.var context5=document.getElementById("drawing5").getContext("2d");
93.var gradient=context5.createLinearGradient(30,30,70,70);
94.gradient.addColorStop(0,"white");
95.gradient.addColorStop(1,"black");
96.//绘制红色矩形
97.context5.fillStyle="#ff0000";
98.context5.fillRect(10,10,50,50);
99.//绘制渐变矩形
100.context5.fillStyle=gradient;
101.context5.fillRect(30,30,50,50);
102.//15.2.9 模式
103.var context6=document.getElementById("drawing6").getContext("2d");
104.var imageEle=document.getElementById("result");
105.var pattern=context6.createPattern(imageEle,"repeat");
106.//绘制矩形
107.context6.fillStyle=pattern;
108.context6.fillRect(0,0,560,150);
109.//15.2.10 使用图像数据
110.//getImageData()、putImageData()
111.//15.2.11 合成
112.//globalAlpha、globalCompositionOperation
113.
114./**
115. * 15.3 WebGL
116. */
JavaScript基础——使用Canvas画图
最新推荐文章于 2024-05-10 10:10:22 发布
2181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
