使用html画简单的图形 HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程

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

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

1、使用Canvas绘制直线：

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

html>

canvas{border:dashed2px#CCC}

function$$(id){

returndocument.getElementById(id);

}

functionpageLoad(){

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

使用html画简单的图形 HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图...