您的位置：首页 > Web前端 > JavaScript
JavaScript基础——使用Canvas画图

2017-01-03 21:57 525 查看
<!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. */
86bd
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航