canvas属性
canvas.moveTo起点 canvas.lineTo终点 canvas.stroke确定线条。 canvas.begainPath()开始绘制 canvas.closePath()清楚已有的状态 .lineWith 线条宽度 .strokeStyle线条样式 .fillStyle填充颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- canvas的html部分,css设置画布的大小 不建议用-->
<canvas id="canvas" style="border: 1px solid black; margin:50px auto;"></canvas>
</body>
</html>
<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:"#f9f51c"},
{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"}
];
window.οnlοad=function(){
// 初始化canvas
// 获取canvas
var canvas = document.getElementById('canvas');
// 使用2d绘制
var context=canvas.getContext("2d")
canvas.width=800;//不要带单位
canvas.height=800
for(var i=0;i<tangram.length;i++)
// tangram[i]绘图的每一项
// context绘图的上下文环境
draw(tangram[i],context)
}
// draw函数
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.stokeStyle="black"
cxt.lineWidth = 3;
cxt.stroke();
}
</script>
2078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
