Introduction to HTML5 canvas (1)

Page code:

<canvas id="myCanvas" style="margin:100px 700px; border:1px solid #666;" onClick="_canvas_click(e)">your browser does not support the canvas tag </canvas>

Usage Analysis of canvas

1. the canvas page has only two attributes, width and height, and is optional. However, setting them together in JS should be a good choice.
Ps_1: If width and height are not specified, the default value is 300*150.
Ps_2: although the canvas size can be adjusted through CSS, the rendered image scales to adapt to the layout. The correct syntax is as follows:

var _canvas=document.getElementById("myCanvas");_canvas.style.backgroundColor="#39f";_canvas.height='300';_canvas.width='500';

PS_3: although the fillrect (left, top, width, height) attribute can also generate the canvas size, it is unfriendly. In the future, the standard may not support this attribute.

2. After the canvas is generated, the getcontext ("2D/3D") attribute must be referenced before painting.
Usage:

var _canvas=document.getElementById("myCanvas");var _CDOM=_canvas.getContext("2d");

Ps_1: currently, getcontext ("2D/3D") only supports 2D attributes... 3D attributes are estimated to take two years...

3. Canvas paint position settings:
Canvas styles are controlled by JS... Therefore, the front-end display certainly does not have the paint brush concept, but canvas provides the moveTo (x, y) interface.
It places the paint brush somewhere on the canvas.
Ps_1: mainly deal with the relative position of the mouse relative to the canvas

var _canvas=document.getElementById("myCanvas");var _CDOM=_canvas.getContext("2d");$("#myCanvas").click(function(e){try{var _x=parseInt(e.pageX)-parseInt(_canvas.style.marginLeft);var _y=parseInt(e.pageY)-parseInt(_canvas.style.marginTop);_CDOM.moveTo(_x,_y);}catch(e){alert(e);}});

4. Set the line drawing style:
First add a property: strokestyle = "# f00"; also supports RGB color strokestyle = "RGB (, 0, 0)"; // set the paint brush color
Canvas supports the following linear style attributes:
_ Cdom. linewidth = '5'; // you can specify the line width.
_ Cdom. linecap = 'butt/round/square '; // you can specify the two sides of a line.
_ Cdom. linejoin = 'round/bevel/miter '; // set the line connection position
_ Cdom. lineto (x, y); // you can specify the position where the line is to be moved.
_ Cdom. Stroke (); // execute the operation
Usage:

var _canvas=document.getElementById("myCanvas");var _CDOM=_canvas.getContext("2d");_CDOM.strokeStyle="#F00";_CDOM.lineWidth='5';_CDOM.lineCap='round';_CDOM.lineJoin='round';_CDOM.moveTo(0,0);_CDOM.lineTo(100,100);_CDOM.lineTo(100,150);_CDOM.lineTo(150,100);_CDOM.stroke();

5. Canvas shadow:
Shadow-related attributes include:
Shadowoffsetx = 2; set the x-axis offset to support plus or minus signs.
Shadowoffsety = 3; set Y axis offset to support plus or minus
Shadowcolor = "#666/RGB (100,100,100)" shadow color
Shadowblur = 3; set the Blur degree of the shadow.
Usage:

var _canvas=document.getElementById("myCanvas");var _CDOM=_canvas.getContext("2d");_canvas.style.backgroundColor="#fff";_canvas.height='300';_canvas.width='500';_CDOM.lineWidth='5';_CDOM.strokeStyle="#f00";_CDOM.shadowOffsetX=-2;_CDOM.shadowOffsetY=3;_CDOM.shadowColor="#666";_CDOM.shadowBlur=10;_CDOM.moveTo(0,0);_CDOM.lineTo(300,300);_CDOM.stroke();

Ps_1: When shadow is used, it seems that a shadow will be added to all objects on the canvas... We recommend that you use them as little as possible... Create a canvas .. Overwrite with relative positioning. I wonder if the problem can be solved.

6. Create a linear gradient
Attribute:
VaR _ CGT = _ cdom. createlineargradient (300,300,) // (start X, start y, end X, end y) mainly affects the gradient length .. The gradient between the start and end is light
_ CGT. addcolorstop (1, "# f00"); // addcolorstop (offset, color)/* parameter: percentage, color value */
_ CGT. addcolorstop (0, "#666"); // you can set multiple gradient values...
_ CGT. addcolorstop (0, "# 39f ");
......

_ After CGT is set, add it to the stroke or background.
_ Cdom. strokestyle = _ CGT; // _ cdom. fillstyle = _ CGT; Compatibility Effect to be investigated

Usage:

var _canvas=document.getElementById("myCanvas");var _CDOM=_canvas.getContext("2d");var _Cgt=_CDOM.createLinearGradient(0,0,300,300);_Cgt.addColorStop(1,"#f00");_Cgt.addColorStop(0,"#666");_CDOM.strokeStyle=_Cgt;_CDOM.moveTo(0,0);_CDOM.lineTo(100,100);_CDOM.stroke();