1.0.5 canvas画布标签
<!DOCTYPEhtml>
<html>
<title>绘制线条</title>
<head>
<scripttype="text/javascript">
//画直线
functionrepeatLine(){
varc=document.getElementById("myCanvas");
//getContext("2d")返回一个CanvasRenderingContext2D对象
varcxt=c.getContext("2d");
//设置当前位置并开始一条新的子路径
cxt.moveTo(10,10);
//为当前的子路径添加一条直线线段
cxt.lineTo(150,50);
//为当前的子路径添加一条直线线段
//cxt.moveTo(90,10);
cxt.lineTo(10,50);
//沿着当前路径绘制或画一条直线
cxt.stroke();
}
//画圆
functionrepeatCycle(){
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.clearRect(0,0,200,100);//擦除了指定的矩形
cxt.fillstyle="#FF0000";//设置或返回用于填充绘画的颜色、渐变或模式
cxt.beginPath();//开始一个画布中的一条新路径（或者子路径的一个集合）
cxt.arc(100,50,20,0,Math.PI*2,true);//
cxt.closePath();//如果当前子路径是打开的，就关闭它
cxt.fill();//使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
}
//设置渐变色
functionsetChangeColor(){
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.clearRect(0,0,200,100);//擦除了指定的矩形
vargrd=cxt.createLinearGradient(0,0,175,100);//创建线性的渐变对象CanvasGradient
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);
}
//将图片放在画布上这个例子貌似不行
functionaddPicture(){
varc=document.getElementById("myCanvas");
varcxt=c.getContext("2d");
cxt.clearRect(0,0,200,100);//擦除了指定的矩形
varimg=newImage();
img.src="ct_html5_canvas_image.gif";
//varimg=document.getElementById("img1");
cxt.drawImage=(img,0,0,200,100);
}
</script>
</head>
<body>
<canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">
Yourbrowserdoesnotsupportthecanvaselement.
</canvas>
<br/>
<buttononclick="repeatLine()">画线</button>
<buttononclick="repeatCycle()">画圆</button>
<buttononclick="setChangeColor()">设置渐变色</button>
<buttononclick="addPicture()">设置图片</button>
<br/>
<imgid="img1"src="ct_html5_canvas_image.gif"width="204"height="104"></img>
</body>
<html>
@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai