Canvas (HTML元素)
历史
它最初由苹果内部使用自己Mac OS X WebKit推出[1],供仪表盘的构件和Safari浏览器等应用进程使用。后来,它被Gecko内核的浏览器(尤其是Mozilla Firefox),Opera[2]和Chrome实现,并被网页超文本应用技术工作小组提议为下一代的网络技术的标准元素。在介绍Canvas给不同的Web标准社区时,他们有不同的反应。有些人抱怨苹果公司建设了一个新的专有标准而不是支持未被网络开发商广泛接受的SVG标准[3]。
范例
Canvas是一个HTML元素。可以利用JavaScript编程语言在该元素上绘图,常见的应用包括绘制图形及文本、影像处理、游戏及动画制作。 若要在HTML上放置Canvas元素,可以使用以下范例:
<canvas id="canvas" width="宽度" height="高度">
您的浏览器不支持canvas元素(此消息在浏览器不支持canvas元素时显示)
</canvas>
这是一段在 Canvas 元素上绘制一个 100x100 大小的正方形的 Javascript 代码:
var c=document.getElementById("canvas"); //获取HTML中的Canvas元素。
var ctx=c.getContext("2d"); //它返回一个在二维平面上绘图的环境。
ctx.fillStyle = 'green'; //设置填充时使用green(绿色)
ctx.rect(0,0,100,100); //在 x=0, y=0 的位置绘制一个 100x100的矩形
ctx.stroke(); //画出刚刚绘制的边框
参考文献
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.