刚开始认真学习H5,虽然以前大概看过H5的教程,但是都是属于空看,一直没有认真练习,所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用路径绘制一个三角形</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();//开始绘制路径
ctx.moveTo(0,0);
ctx.lineTo(0,290);
ctx.lineTo(290,290);
ctx.closePath();//结束路径
//下面两行是填充图形内部的代码
ctx.fillStyle="rgb(200,0,0)";//指定填充时使用的颜色与样式
ctx.fill();
//下面两行是绘制那个周围路径的代码
ctx.strokeStyle="rgb(0,0,0)";//指定路径的线颜色与样式
ctx.stroke();
</script>
</body>
</html>