2011
04-22

canvas 简单api学习

The element isn’t supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.

Firefox1.5+, Opera 9+, Safari, Chrome, IE9

/** 1. 只有矩形是可以直接使用api函数绘出的，其他的图形都需要通过路径来构造。要使用路径来绘图 * *************/ var ctx=$('c').getContext('2d'); //通过canvas的id取得canvas并调用getContext方法得到2d渲染环境，目前只有2d为有效值。 ctx.fillStyle='#ccc'; //fillStyle是为当前环境配置填充颜色 ctx.fillRect (10, 10, 50, 50); //定义了填充区域 ctx.fillStyle = "#ff0000"; ctx.fillRect (30, 30, 50, 50); ctx.strokeStyle='#ff0000'; ctx.strokeRect(80, 80, 80, 80); ctx.clearRect(30, 30, 50, 50); //清除指定区域使之透明，该区域是矩形区域 ctx.fillStyle = "#330033"; ctx.fillRect (50, 50, 50, 50); /** 2. 路径 * beginPath() closePath() stroke() fill() *************/ ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(400,300); ctx.lineTo(400,400); ctx.lineTo(500,400); ctx.lineTo(500,400); ctx.strokeStyle='#330000'; ctx.closePath(); ctx.stroke(); ctx.fill(); /** 3. 圆弧 * arc(x, y, radius, startAngle, endAngle, anticlockwise) *************/ ctx.beginPath(); var radius= 80; // Arc radius var startAngle= 0; // Starting point on circle var endAngle=(Math.PI/180) * 360; var anticlockwise= false; // anticlockwise ctx.arc(600, 600, radius, startAngle, endAngle, anticlockwise); ctx.closePath(); ctx.fillStyle='#ff0000'; ctx.fill(); /** 4. 文本 * *************/ ctx.font="12px sans-serif"; ctx.fillText("hello", 500, 50); /** 5. 动画 * *************/ var img=new Image(); img.src='pic.png'; img.onload=function(){ ctx.drawImage(img,0,600, 300, 300); ctx.clearRect(0, 600, 300, 50); //清除指定区域使之透明，该区域是矩形区域 }

https://developer.mozilla.org/en/Canvas_tutorial

本文固定链接:

转载请注明: yorsal 2011年04月22日 于 jQuery中文社区 发表

最后编辑：2011-04-29

作者：yorsal

I LOVE JQUERY

站内专栏

捐 赠如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！