<canvas>标签，是HTML 5 中新定义的一组标签，它可以定义图形，比如图表和其他图像，但是，需要注意的是，<canvas>标签只是图形容器，必须使用脚本来绘制图形。一般在HTML文档中使用<canvas>标签时，需要给它设置一个 id，方便在 javascript 脚本中引用。比如：
<canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
注意：如果当前浏览器不支持<canvas>标签，则会显示<canvas></canvas>中的内容，即“当前浏览器不支持Canvas，请更换浏览器后再试”。
获取 canvas : var canvas = document.getElementById("canvas"); //获取canvas
给 canvas 指定大小时，尽量不要使用 CSS 样式，直接定义 canvas 的 width 和 height 属性(设置时没有单位)
<canvas>标签属性：canvas.width = 600 ;
canvas.height = 500;
var context =canvas.getContext("2d"); //获取canvas的上下文绘图环境(这里是2d环境)
canvas 中的绘图是基于状态绘制，绘制的方法有：
（1）绘制直线：
context.lineWidth = 5; //设置线条的宽度
context.strokeStyle = "#005588";//描述的是线条的样式，主要指线条的颜色（可以使用CSS样式设置）
context.moveTo(x, y); //状态设置：绘制的起点坐标（x, y）,以canvas的左上角为参考点
context.lineTo(x, y); //状态设置：绘制的终点坐标（x, y）
context.stroke(); //绘制
demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
window.onload = function(){
//获取canvas及绘图的上下文环境
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas的大小
canvas.width = 500;
canvas.height = 400;
context.lineWidth = 5; //设置线条的宽度
context.strokeStyle = '#005588'; //设置线条颜色
context.moveTo(60,60);//绘制起点坐标
context.lineTo(400,350);//绘制的第一条线段的终点坐标，也是下一条线段的起点坐标
context.lineTo(60,350);
context.lineTo(400,200);
context.stroke();//绘制直线
}
</script>
</body>
</html>demo1效果：
（2）绘制弧线：
context.arc( centerx, //圆心的横坐标
centery, //圆心的纵坐标
radius, //圆弧的半径
startingAngle, //弧线从哪个弧度值开始
endingAngle, //弧线结束于哪个弧度值
anticlockwise = false //可选参数，描述绘制弧线是以顺时针（值为false,默认情况下），还 是逆时针( anticlockwise = true )
注意：这里的弧度值及其位置是固定的，如下图所示：
)
demo2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制弧线</title>
</head>
<body>
<canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
window.onload = function(){
//获取canvas及绘图的上下文环境
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas的大小
canvas.width = 300;
canvas.height = 300;
context.lineWidth = 3; //设置线条的宽度
context.strokeStyle = '#005588'; //设置线条颜色
context.arc(80, 80, 50, 0, 1.5*Math.PI, false); //顺时针从 0 pi到 1.5 pi
//context.arc(220, 80, 50, 1*Math.PI, 2*Math.PI, true); //逆时针从 1 pi 到 2 pi
context.stroke();
}
</script>
</body>
</html>demo2效果：
（3）图形着色：
context.fillStyle = "rgb(2,100,30)";//定义填充颜色
context.fill();
demo3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图形着色</title>
</head>
<body>
<canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
window.onload = function(){
//获取canvas及绘图的上下文环境
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas的大小
canvas.width = 500;
canvas.height = 400;
context.lineWidth = 3; //设置线条的宽度
context.strokeStyle = '#005588'; //设置线条颜色
context.moveTo(60,60);
context.lineTo(400,350);
context.lineTo(60,350);
context.lineTo(60,60);
context.fillStyle = 'yellow';
context.fill();
context.stroke();
}
</script>
</body>
</html>demo3效果：
（4）绘制多条路径：
context.beginPath(); //声明从此时起开始了一段新的路径
context.closePath(); //结束当前路径,如果当前绘制路径不是封闭的，closePath()会自动将当前路径使用一条线段连接起来
beginPath() 和 closePath() 不一定成对出现。。。。。。
demo4:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制多条路径</title>
</head>
<body>
<canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
window.onload = function(){
//获取canvas及绘图的上下文环境
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设置canvas的大小
canvas.width = 500;
canvas.height = 400;
context.lineWidth = 3; //设置线条的宽度
context.strokeStyle = '#005588'; //设置线条颜色
context.beginPath();
context.moveTo(60,60);
context.lineTo(400,350);
context.lineTo(60,350);
context.closePath();//自动封闭当前路径
context.fillStyle = 'yellow';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(460,60);
context.lineTo(400,120);
context.lineTo(400,200);
context.lineTo(420,300);
context.closePath();
context.stroke();
}
</script>
</body>
</html>demo4效果：
一个简单的综合案例——七巧板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>七巧板</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
var tangram = [
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ccc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
];
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
for(var i = 0; i < tangram.length; i++){
draw(tangram[i], context);
}
}
function draw(piece, cxt){
cxt.beginPath();
cxt.moveTo( piece.p[0].x, piece.p[0].y );
for( var j = 1; j < piece.p.length; j++ ){
cxt.lineTo( piece.p[j].x, piece.p[j].y );
}
cxt.closePath();
cxt.fillStyle = piece.color;
cxt.fill();
cxt.strokeStyle = 'black';
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
