HTML5用canvas绘制五星红旗
2024-07-29 22:51:05 218人阅读
在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶、备受争议的就是"Flash杀手"。IT评论界老喜欢用这个词了,杀手无处不在。不管是不是杀手,HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是 canvas元素。
作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。兴城市费永礼品
大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,firefox 也可以通过插件形式支持 3D canvas 。我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:http://excanvas.sourceforge.net/。
效果演示
HTML5 代码如下:
03 | < title >Canvas tutorial</ title > |
04 | < script type = "text/javascript" > |
06 | var ctx = document.getElementById(‘canvas‘).getContext(‘2d‘); |
08 | ctx.fillStyle = ‘#f00‘; |
09 | ctx.fillRect(0,0,450,300); |
13 | ctx.rotate(Math.PI*2/7); |
18 | ctx.translate(80,-50); |
22 | ctx.translate(110,-10); |
26 | ctx.translate(110,30); |
35 | function drawStar(ctx,r){ |
39 | for (var i=0;i< 9 ;i++){ |
40 | ctx.rotate(Math.PI/5); |
42 | ctx.lineTo((r/0.525731)*0.200811,0); |
48 | ctx.fillStyle = ‘#FFFF00‘ ; |
54 | < body onload = "draw();" > |
55 | < canvas id = "canvas" width = "800" height = "300" ></ canvas > |
HTML5用canvas绘制五星红旗
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉:
投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。