How to draw graphics with the canvas element in HTML5

Today I will share with you the use of the canvas element in HTML5. It has certain reference value and I hope it will be helpful to everyone.

[Recommended course: HTML5 tutorial】

canvas element

Mainly use JavaScript to draw images on web pages. The canvas is a rectangular area, and each pixel can be controlled. The canvas has a variety of methods for drawing paths, rectangles, circles, and adding images. Next, we will The article introduces the

html code

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

rectangle

fillStyle: used to add color to graphics

fillRect (x,y,width,height)

x: x value from the upper left corner

y: y value from the upper left corner

width, height: it’s graphic Width and height

<script type="text/javascript">
var demo=document.getElementById("demo");
var fang=demo.getContext("2d");
fang.fillStyle="pink";
fang.fillRect(0,0,200,50);
</script>

Line

moveTo: Line start position

lineTo:End position

lineWidth: line width

strokeStyle: color

stroke: start drawing

 var demo=document.getElementById("demo");
    var xian=demo.getContext("2d");
      xian.moveTo(10,10);
      xian.lineTo(100,100);
      xian.lineWidth=2;
      xian.strokeStyle="pink";
      xian.stroke();

circle

beginPath(): Start path

arc(x,y,r,sAngle,eAngle,counterclockwise)

x,y: round Center point coordinates

r: radius of the circle

sAngle, eAngle: starting angle and ending angle of the circle

counterclockwise: writable or not specifies whether it should be counterclockwise or clockwise Hour hand drawing. False = clockwise, true = counterclockwise.

var demo=document.getElementById("demo");
    var yuan=demo.getContext("2d");
    yuan.beginPath();
    yuan.arc(100,100,50,0,2*Math.PI);
    yuan.strokeStyle="pink";
    yuan.stroke();

Graphic insertion

drawImage(img,sx,sy,swidth,sheight ,x,y,width,height)

sx,sy: The cut x, y coordinate position

swidth,sheight: The width and height of the cut image

x,y: place the x,y coordinate position of the image on the canvas

width,height: the width and height of the image to be used

var demo=document.getElementById("demo");
var img1=document.getElementById("img1");
var img=demo.getContext("2d"); 
img1.onload=function(){  
img.drawImage(img1,10,10,100,120)

Summary: The above is the entire content of this article. I hope this article will be helpful to everyone.

The above is the detailed content of How to draw graphics with the canvas element in HTML5. For more information, please follow other related articles on the PHP Chinese website!