基本信息
-
<canvas>默认为inline，默认大小为width:300px;height:150px;，默认 黑色 -
<canvas>默认原点为左上角，向右为X轴正方向，向下为Y轴正方向 - 参照
W3C标准，<canvas>的大小应该写在标签中，并且不写单位，如下：
<canvas id="canvas" width="1024" height="768"></canvas> - 也可以在
JavaScript中使用canvas.width，canvas.height设置画布宽高（同样不用写单位）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:5px solid red;display: block;margin:50px auto;"></canvas> <script> // 获取到 canvas 元素 var canvas = document.getElementById('canvas'); // JS 中设置宽高 canvas.width = 1024; canvas.height = 768; // 兼容 if(canvas.getConext('2d')){ var context = canvas.getContext('2d') // 使用 context 绘制 } else{ alert('当前浏览器不支持 Canvas , 请更换浏览器后再试') } </script> </body> </html>
画一条直线
- 起点（状态）
context.moveTo() - 终点（状态）
context.lineTo() - 线条宽度
context.lineWidth = 5 - 线条颜色
context.strokeStyle = '#00588' - 画线条（绘制）
context.stroke() -
canvas是基于状态的绘图，即：整个绘图过程应该是先设置绘图的状态，之后调用具体的函数来进行具体绘制// 画个三角形 context.moveTo(100,100); context.lineTo(700,700); context.lineTo(100,700); context.lineTo(100,100); context.lineWidth = 5; context.strokeStyle = "#005588"; context.stroke();
canvas 三角形
实心图形
- 填充颜色：
.fillStyle = xxx - 填充：
.fill()
...
context.fillStyle = 'rgb(2,100,30)'
context.fill();
实心图形
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.stroke();
context.fillStyle = 'rgb(2,100,30)'
context.fill();
-
以上两种方式可以共用，实现一个 带边框且被填充的三角形
-
如果想画两条线，为保证两条线互不干扰，需要重新调用
beginPath() -
beginPath()和closePath()不一定非要成对出现，由于closePath()会将绘制图形的首尾自动闭合，所以视情况决定是否调用closePath() -
closePath()对于.fill()无效，即：当填充时，无论是否有closePath()，都会按照闭合状态进行填充context.beginPath(); // 第一条开始 context.moveTo(100,100); context.lineTo(700,700); context.lineTo(100,700); context.lineTo(100,100); context.closePath(); // 第一条结束 context.fillStyle = 'rgb(2,100,30)' context.fill(); context.lineWidth = 5; context.strokeStyle = 'red'; context.stroke(); context.beginPath(); // 第二条开始 context.moveTo(200,100); context.lineTo(500,100); context.closePath(); // 第二条结束 context.strokeStyle = 'black'; context.stroke();
画两个图形
画个七巧板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas七巧板</title>
</head>
<body>
<canvas id="canvas" style="border:5px solid #aaa;margin:50px auto;display: block;"></canvas>
<script>
// 存一个数据表
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:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'},
]
// 获取到 canvas 元素
var canvas = document.getElementById('canvas');
// 设置画布宽高
canvas.width = 800;
canvas.height = 800;
// 准备画
var context = canvas.getContext('2d');
// 画每个 七巧板
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 i = 1;i<piece.p.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y);
}
// "起笔" 标识
cxt.closePath();
// 填充颜色
cxt.fillStyle = piece.color;
// 填充
cxt.fill();
// 边框颜色
cxt.strokeStyle = '#000';
// 边框宽度
cxt.lineWidth = 3;
// 画边框
cxt.stroke();
}
</script>
</body>
</html>
Canvas 七巧板
画弧线
-
context.arc( 圆心x轴 , 圆心y轴 , 半径 , 开始弧度 , 结束弧度 [,顺/逆时针] )，默认顺时针false; -
无论画的方向如何，起点和终点位置都是不变的
都从右极点开始画
context.lineWidth = 5;
context.strokeStyle = 'red';
// 起点 终点 半径 开始弧度 结束弧度
context.arc(300,300,200,1*Math.PI,1.5*Math.PI);
context.stroke();
9点位置画到12点位置
context.lineWidth = 5;
context.strokeStyle = 'red';
// 起点 终点 半径 开始弧度 结束弧度
context.arc(300,300,200,1.5*Math.PI,1*Math.PI);
context.stroke();
12点位置画到9点位置
网友评论