Canvas drawing share 1:

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:

 

 

Tags: Attribute

Posted on Fri, 31 Jan 2020 13:39:45 -0500 by e_00_3