版权声明： https://blog.csdn.net/qq_36801966/article/details/80902939
摘要：html5的canvas元素称得上是html5的核心技术，而作为一个依靠js绘制华丽图像的元素，Canvas究竟能够运用在哪些方面的开发？
什么是Canvas？
Canvas元素是h5的一部分，允许脚本语言动态渲染图像。canvas由一个可绘制地区html代码中的属性定义决定高度和宽度。js代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的APU，从而生成动态的图形
我们能用Canvas做什么
1、游戏
毫无疑问，游戏在h5领域具有举足轻重的地位。h5在基于web的图像显示方面比flash更加立体、更加精巧
2、图表
图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
小栗子：
画图形
<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<
title
>绘制图形
</
title
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
<
style
></
style
>
<
script
type=
"text/javascript"
src=
"canvasCase.js"
charset=
"utf-8"
></
script
>
</
head
>
<
body
onload=
"
draw0('canvas0');
draw1('canvas1');
"
>
<
h2
>canvas元素使用示例-太极图
</
h2
>
<
canvas
id=
"canvas0"
width=
"1000"
height=
"700"
></
canvas
>
<
h2
>canvas元素使用示例-钟表
</
h2
>
<
canvas
id=
"canvas1"
width=
"400"
height=
"300"
></
canvas
>
<
h2
>canvas元素使用示例-拆线图
</
h2
>
<
canvas
id=
"canvas2"
width=
"450"
height=
"360"
></
canvas
>
</
body
>
</
html
>
<!--
canvasCase.js文件
// 画太极图
function
draw0(
id){
var canvas =
document.
getElementById(id);
if(canvas ==
null){
return
false;
}
canvas.
width =
1000;
canvas.
height =
500;
var context =
canvas.
getContext(
'2d');
context.
arc(
300,
300,
200,
0,
Math.PI*
2);
context.
fillStyle =
'#000';
context.
fill();
context.
strokeStyle =
'#ccc';
context.
stroke();
// 画另一个大圆
// 重置
context.
beginPath();
context.
arc(
300,
300,
200,
1.5 *
Math.PI,
0.5 *
Math.PI);
context.
fillStyle =
'#fff';
context.
fill();
context.
stroke();
// 画另一个圆
// 重置
context.
beginPath();
context.
arc(
300,
200,
100,
0,
2 *
Math.PI);
context.
fillStyle =
'#000';
context.
fill();
context.
strokeStyle =
'#000';
context.
stroke();
// 画另一个圆
// 重置
context.
beginPath();
context.
arc(
300,
400,
100,
0,
2 *
Math.PI);
context.
fillStyle =
'#fff';
context.
fill();
context.
strokeStyle =
'#fff';
context.
stroke();
// 画另一个圆
// 重置
context.
beginPath();
context.
arc(
300,
200,
50,
0,
2 *
Math.PI);
context.
fillStyle =
'#fff';
context.
fill();
context.
strokeStyle =
'#fff';
context.
stroke();
// 画另一个圆
// 重置
context.
beginPath();
context.
arc(
300,
400,
50,
0,
2 *
Math.PI);
context.
fillStyle =
'#000';
context.
fill();
context.
strokeStyle =
'#000';
context.
stroke();
}
// 画钟表
var canvas1 =
"",
context1 =
"";
function
draw1(
id =
'canvas1'){
var canvas1 =
document.
getElementById(id);
if(canvas1 ==
null){
return
false;
}
canvas1.
width =
1000;
canvas1.
height =
500;
var context1 =
canvas1.
getContext(
'2d');
var x =
210,
y =
210,
r =
200,
date =
new
Date(),
hours =
date.
getHours(),
minutes =
date.
getMinutes(),
seconds =
date.
getSeconds();
var h = (-
90 + hours*
30 + (minutes /
2)) *
Math.PI /
180,
m = (-
90 + minutes*
6 + (seconds /
10)) *
Math.PI /
180,
s = (-
90 + seconds*
6) *
Math.PI /
180;
context1.
beginPath();
context1.
arc(x, y, r,
0,
360 *
Math.PI /
180);
context1.
fillStyle =
'#fff';
context1.
fill();
context1.
strokeStyle =
'#ccc';
context1.
stroke();
context1.
closePath();
// 分针
context1.
beginPath();
for(
var i =
0; i <
60; i ++){
context1.
moveTo(x, y);
context1.
arc(
x,
y,
r,
i *
6 *
Math.PI/
180,
(i +
1)*
6 *
Math.PI/
180);
}
context1.
fillStyle =
"#000";
context1.
stroke();
context1.
beginPath();
context1.
arc(x, y, r*(
18/
20),
0,
2 *
Math.PI);
context1.
fillStyle =
'#fff';
context1.
fill();
context1.
strokeStyle =
"#fff";
context1.
stroke();
//context.closePath();
// 时针
context1.
beginPath();
for(
var i =
0; i <
12; i ++){
context1.
moveTo(x, y);
context1.
arc(
x,
y,
r,
i *
30 *
Math.PI/
180,
(i +
1)*
30 *
Math.PI/
180);
}
context1.
lineWidth =
3;
context1.
strokeStyle =
"#000";
context1.
stroke();
context1.
beginPath();
context1.
arc(x, y, r*(
16/
20),
0,
2 *
Math.PI);
context1.
fillStyle =
'#fff';
context1.
fill();
context1.
strokeStyle =
"#fff";
context1.
stroke();
// 画时分秒线
// 时
context1.
beginPath();
context1.
moveTo(x, y);
context1.
arc(x, y, r*(
10/
20), h, h);
context1.
lineWidth =
5;
context1.
strokeStyle =
'#000';
context1.
stroke();
// 分
context1.
beginPath();
context1.
moveTo(x, y);
context1.
arc(x, y, r*(
12/
20), m, m);
context1.
lineWidth =
3;
context1.
strokeStyle =
'#000';
context1.
stroke();
// 秒
context1.
beginPath();
context1.
moveTo(x, y);
context1.
arc(x, y, r*(
14/
20), s, s);
context1.
lineWidth =
1;
context1.
strokeStyle =
'#000';
context1.
stroke();
}
draw1();
setInterval(draw1,
1000);