html期末考试绘制直线,html5教程 （二）（canvas绘制简单的直线）

Html5_convas

var elem = document.getElementById("myConvas");

if (elem && elem.getContext) {

var myContext = elem.getContext("2d");

/*

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。

颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla。

通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。

如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。

前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细

*/

myContext.fillStyle = "#000FFF";

myContext.strokeStyle = "#FF00F0";

/*

通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓，然后绘制         边框和填充。

创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线         和其他图形绘制你的图形。

绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用                closePath() 结束自定义图形绘制

*/

myContext.beginPath();

myContext.moveTo(10,10);

//定义第一条直线的终点坐标，也即为第二条直线的起点坐标

myContext.lineTo(60,90);

myContext.lineTo(10,150);

myContext.lineTo(10,10);

//画圆

//myContext.arc(90,89,45,50,Math.PI*2,true);

//用fillStyle定义的颜色填充

myContext.fill();

myContext.stroke();

myContext.closePath();

}