HTML5技术

HTML5 学习总结(四)——canvas绘图、WebGL、SVG - 张果(2)

字号+ 作者:H5之家 来源:H5之家 2016-12-01 13:00 我要评论( )

arc方法用来绘制一段圆弧路径,以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度来,而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为 true 就是逆时针,false 则为顺

arc方法用来绘制一段圆弧路径,以(x,y)圆心位置radius为半径、startAngle为起始弧度、endAngle为终止弧度来,而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定,如果为 true 就是逆时针,false 则为顺时针,Math.PI * 2 刚好为一周。

示例代码:

绘制圆弧); ); ; ; ); //闭合 ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle; ctx.arc(); ctx.fill();

运行效果:

 

练习:

a、模拟钟表的时,分,秒

b、模拟水波,一个黑色的屏幕,多个从中心随机产生彩色的圈不断的放大,接触到屏幕结束。

1.5、绘制图像

context.drawImage(image,x,y)

把image图像绘制到画布上x,y坐标位置。

context.drawImage(image,x,y,w,h)

把image图像绘制到画布上x,y坐标位置,图像的宽度是w,高度是h。

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
截取image图像以sx,sy为左上角坐标,宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置,图像宽度是dw,高度是dh。
其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素

示例代码:

绘制图像() { ); ); ; ; ctx.moveTo(); ctx.strokeRect(); ); ); }

运行效果:

1.6、绘制文字

context.fillText(text,x,y,[maxWidth])

在canvas上填充文字,text表示需要绘制的文字,x,y分别表示绘制在canvas上的横,纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。

context.strokeText(text,x,y,[maxWidth])

在canvas上描边文字,参数的意义同fillText
使用context.font属性设置字体
context.font='italic bolder 48px 黑体';

示例代码:

绘制文字() { ); ); ; ; ctx.moveTo(); ctx.strokeRect(); ; ctx.strokeText(); ctx.fillText(); }

运行结果:

1.7、随机颜色与简单动画

主要结合随机方法与定时器、时钟实现简单的动画。

随机颜色与简单动画 { randomColor: function() { ); }, getNum: function(min, max) { min; }, r: 10, run: function() { ); ); ); this.bindEvent(); }, draw: function() { magicCircle.ctx.beginPath(); magicCircle.ctx.lineWidth ); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(magicCircle.getNum(); magicCircle.ctx.stroke(); magicCircle.r += 10; ; }, bindEvent:function() { (e){ magicCircle.ctx.lineWidth ); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(e.clientX, e.clientY, magicCircle.r, ); magicCircle.ctx.stroke(); magicCircle.r += 10; ; } } }; magicCircle.run();

运行效果:

二、WebGL

WebGL(全写Web Graphics Library)是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

WebGL完美地解决了现有的Web交互式三维动画的两个问题:

第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;

第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂,我们经常会使用一些三方的库,如three.js等,这些库多数用于HTML5游戏开发。

Three.js的示例代码:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5地理定位 - 八颗

    HTML5地理定位 - 八颗

    2016-12-01 14:00

  • Html5 绘制五星红旗 - 飞翔的月亮

    Html5 绘制五星红旗 - 飞翔的月亮

    2016-12-01 12:00

  • Html5 布局方式 - 飞翔的月亮

    Html5 布局方式 - 飞翔的月亮

    2016-12-01 11:00

  • HTML5中Video和Audio - 进击的小前端

    HTML5中Video和Audio - 进击的小前端

    2016-12-01 10:00

网友点评
"