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

参考资料:

http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html#getcontext2d

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

http://www.w3school.com.cn/html5/html5_canvas.asp

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>
 

JavaScript

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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。