canvas元素:Firefox,Chrome支持,IE不支持(可以使用excanvas库,将其转化为svg来实现)
在页面上定义一个canvas元素,需要指定长宽(px为单位)。如果使用excanvas库,不能够带单位。
上面贝塞尔曲线的效果
[img]http://dl.iteye.com/upload/attachment/302125/8511fa14-f9a8-3483-a08c-ba493155353a.bmp[/img]
:
在页面上定义一个canvas元素,需要指定长宽(px为单位)。如果使用excanvas库,不能够带单位。
<canvas id="graph" width=200 height=200 ></canvas>
var graph = document.getElementById('graph');
// 判断是否支持canvas绘画
if(typeof graph.getContext != 'undefined'){
//目前只支持2d图形,大小写敏感.
var context = graph.getContext("2d");
//矩形
context.fillStyle = '#ccc';
context.fillRect(0,0,200,200);
context.clearRect(75,75,75,75);
context.strokeStyle = "#ff0000";
context.strokeRect(95,95,25,25);
//画直线:
context.beginPath();
context.moveTo(150, 100);
context.lineTo(200, 225);
context.stroke();
//一个三角区域
context.beginPath();
context.moveTo(150, 100);
context.lineTo(200, 225);
context.lineTo(250, 100);
context.fillStyle = 'rgba(0,0,0,0.5)';
context.fill();
//arc弧度绘画方法参数:
/* arc(圆心X,圆心Y,半径r,起始弧度,结束弧度,填充逆时针标识)
* 1.弧度值(结束弧度 - 起始弧度)为正表示顺时针,为负表示逆时针
* 2.起始弧度为0,是指点(X+r,Y).
*/
//画一个圆
context.beginPath();
context.arc(100,100,50,0,2*Math.PI,false);
context.stroke();
//画扇形
context.beginPath();
// 设置起点在圆心
context.moveTo(100,100);
context.arc(100, 100, 50, 0, -Math.PI/2, true);
// 闭合,从而可以画出扇形
context.closePath();
context.fillStyle = "#FB6CF9";
context.fill();
/* bezierCurveTo()贝塞尔曲线绘画方法:
* 参数:
* 起点的控制点的X坐标,
* 起点的控制点的Y坐标,
* 终点的控制点的X坐标,
* 终点的控制点的Y坐标,
* 终点的X坐标,
* 终点的X坐标
*
* <i>起点为画笔的上次结束点,默认为(0,0)</i>
* */
context.beginPath();
context.arc(200, 100, 50, 0, Math.PI, true);
context.lineTo(160, 100);
context.bezierCurveTo(170, 100, 180, 110, 180, 120);
context.bezierCurveTo(180, 125, 172, 140, 185, 140);
context.bezierCurveTo(198, 140, 190, 125, 190, 120);
context.bezierCurveTo(190, 110, 200, 100, 210, 100);
context.closePath();
context.stroke();
}
上面贝塞尔曲线的效果
[img]http://dl.iteye.com/upload/attachment/302125/8511fa14-f9a8-3483-a08c-ba493155353a.bmp[/img]
: