我们当然不能满足于能在画布上画那么一条直线,接下来我们就要画一个更高级的一点的东西:三角形!同样,先上图和代码:
源代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
<!--设置画布大小-->
canvas.width = 1024;
canvas.height = 768;
context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);
<!-- 填充图形-->
context.fillStyle = "rgb(2,100,30)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#005588";
context.stroke();
}
</script>
</body>
</html>
代码详解:
1.我们的三角形的3个角分别在(100,100),(700,700),(100,700),最后我们的画笔还要回到原点(100,100)这样才能完成一个完整三角形的绘制。
2.我们使用context.fill()把整个三角形填充为指定颜色,context.fillStyle = "rgb(2,100,30)"设置填充的颜色。
3.同样,使用context.stroke()把三角形的轮廓绘制出来。