WEBRTC Learning ——— Record two: Canvas learning

Resources:

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>is a new element of HTML5, you can use JavaScript scripts to draw graphics. For example: paint, synthesize photos, create animations and even real-time video processing and rendering.

Mozilla programs are supported from Gecko 1.8 (Firefox 1.5) <canvas> . It was first introduced by Apple for OS X Dashboard and Safari. Internet Explorer starts with IE9 <canvas> , and older versions of IE can be supported by introducing scripts from Google's Explorer Canvas Project <canvas> . Chrome and opera are also supported <canvas> .

<canvas> elements can also be used by WebGL as a hardware acceleration for 3D graphics on Web pages .

Example

This is a CanvasRenderingContext2D.fillRect() simple example of how to use it.

Html

<canvas id="canvas"></canvas>

Javascript

var canvas= document.getElementById("Canvas");var ctx= Canvas.GetContext("2d");
GetContext returns an object of CANVASRENDERINGCONTEXT2D.
Displays a two-dimensional picture in the canvas container by manipulating the object. Https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2Dctx. FillStyle =  "Green"; CTX.  FillRect(Ten, ten, +   );       

WEBRTC Learning ——— Record two: Canvas learning