Home  >  Article  >  Web Front-end  >  How to draw graphics with the canvas element in HTML5

How to draw graphics with the canvas element in HTML5

清浅
清浅Original
2018-11-26 10:38:002552browse

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>

Image 1.jpg

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();

Image 2.jpg

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();


Image 3.jpg

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)

Image 4.jpg

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn