正文
HTML5七巧板canvas绘图（复习）
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = "";
canvas.height = "";
var points = [
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }], color: "red" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }], color: "orange" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }], color: "yellow" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }], color: "green" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }], color: "cyan" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }], color: "blue" },
{ p: [{ x: , y: }, { x: , y: }, { x: , y: }], color: "purple" }
]
for (var i = ; i < points.length; i++) {
context.beginPath();
//context.moveTo(points[i].p[0].x, points[i].p[0].y);
for (var j = ; j < points[i].p.length; j++) {
context.lineTo(points[i].p[j].x, points[i].p[j].y);
context.fillStyle = points[i].color;
}
context.closePath();
context.lineWidth = "";
context.strokeStyle = "black";
context.stroke();
context.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" style="border:5px solid red ;margin:50px,auto;"></canvas>
</body>
</html>
