Home > Article > Web Front-end > 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!