1. To create a canvas:
<canvas id="canvas" width="500" height="500" style="background:#eee;"></canvas>
Note:
1. Canvas width and height can only be copied by HTML/JS attribute, not CSS.
2. There is only one brush on each canvas for drawing.
2. To create a brush:
<script> var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); </script>
3. Draw rectangle:
<body> <canvas id="canvas" width="350" height="200" style="background:#eee;"></canvas> <script> var c=document.getElementById("canvas");//Get canvas var ctx=c.getContext("2d");//Create brush ctx.lineWidth=2;//Stroke Width ctx.fillStyle="#C92027 "; / / filled style ctx.fillRect(50,50,100,100);//Fill a rectangle with top margin of 50px, left margin of 50px, width and height of 100px ctx.strokeStyle="#C92027 "; / / stroke style ctx.strokeRect(200,50,100,100); //Stroke a rectangle </script> </body>
The effect is as follows:
Note:
1. The order of the stroke style and the stroke rectangle cannot be reversed, otherwise the style cannot be loaded, and the default is black
2. ctx.clearRect(x,y,w,h) clears the drawing within a rectangle
4. Draw text:
<body> <canvas id="canvas" width="500" height="200" style="background:#eee;"></canvas> <script> var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.textBaseline="top";//Text baseline (value: alpha / top / bottom) ctx.font="30px sans-serif";//Text size and font ctx.fillStyle="red";//Style of text ctx.fillText("Web Front-end development",80,40);//Fill in a piece of text, 80px from the top of the canvas, 40px from the left ctx.strokeStyle="red";//Stroke text style ctx.strokeText("Web Front-end development",80,80);//Stroke a piece of text ctx.fillStyle="blue"; ctx.fillText("width:"+ctx.measureText("web").width,40,120); // ctx.measureText(str) detect text width </script> </body>
The effect is as follows:
