<body onload="draw();">
<!--
canvas不设置宽高时，默认width:300px,height:150px;
canvas提供了三种方法绘制矩形
fillRect(x,y,width,height) 绘制一个填充的矩形
strokeRect(x,y,width,height) 绘制一个矩形的边框
clearRect(x,y,width,height) 清除指定矩形区域，让清除部分完全透明
x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）
的坐标。width和height设置矩形的尺寸。
绘制路径
1、创建路径起始点
2、使用画图命令画出路径
3、把路径封闭
4、通过描边或填充路径区域来渲染图形
所用到的函数
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath() 闭合路径之后图形绘制命令又重新指向到上下文中
stroke() 通过线条来绘制图形轮廓
fill() 通过填充路径的内容区域生成实心的图形
-->
<canvas id="area" width="400px" height="300px"></canvas>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("area");
//get.Context()方法用来渲染上下文和它的绘画功能，只有一个参数
if(canvas.getContext){
var ctx = canvas.getContext('2d');
//填充三角形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,50);
ctx.lineTo(50,50);
ctx.fill();
//描边三角形
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.stroke();//stroke()不会闭合路径，如果没有添加闭合路径closePath(),则只绘制了两条线段，并不是一个完整的三角形
}
}
</script>
</body>
网友评论