canvas教程

webrtc学习———记录二:canvas学习

字号+ 作者:H5之家 来源:H5之家 2015-10-17 15:08 我要评论( )

参考资料:http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html#getcontext2dhttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Canvashttp://www

参考资料:

#getcontext2d

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Canvas

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement

<canvas>是 HTML5新增的元素,可使用JavaScript脚本来绘制图形。例如:画图,合成照片,创建动画甚至实时视频处理与渲染。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的,用于 OS X Dashboard和 Safari。Internet Explorer 从IE9开始<canvas>,更旧版本的IE可以引入 Google 的 Explorer Canvas项目中的脚本来获得<canvas>支持。Chrome和Opera 9+ 也支持 <canvas>。

<canvas>元素也可被WebGL用作网页上的3D图形硬件加速

示例

这是一个使用CanvasRenderingContext2D.fillRect()方法的简单例子.

HTML<canvas id="canvas"></canvas>JavaScriptvar canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
//getContext 返回一个CanvasRenderingContext2D的对象。
//通过对该对象的操作,在canvas容器中显示一个二维的图片。//https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2Dctx.fillStyle = "green";ctx.fillRect(10, 10, 100, 100);

 

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

相关文章
  • WebRTC相关的canvas与video

    WebRTC相关的canvas与video

    2017-03-24 08:02

  • HTML5学习记要-canvas学习之获取鼠标在canvas上的坐标位置

    HTML5学习记要-canvas学习之获取鼠标在canvas上的坐标位置

    2017-01-30 10:00

  • HTML5学习记要-canvas学习之鼠标选取放大图像

    HTML5学习记要-canvas学习之鼠标选取放大图像

    2016-07-20 13:08

  • HTML5学习记录-----canvas学习之鼠标选取放大图像

    HTML5学习记录-----canvas学习之鼠标选取放大图像

    2016-03-10 19:41

网友点评
l