使用 html5 canvas 绘制精美的图形,HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图...

HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：

XML/HTML Code复制内容到剪贴板html>

canvas{border:dashed 2px #CCC}

function $$(id){

return document.getElementById(id);

}

function pageLoad(){

varcan= $$("can");

varcancans= can.getContext("2d");

cans.moveTo(20,30);//第一个起点

cans.lineTo(120,90);//第二个点

cans.lineTo(220,60);//第三个点(以第二个点为起点)

cans.lineWidth=3;

cans.strokeStyle="red";

cans.stroke();

}

4