Several common methods of html5 Canvas canvas drawing
Reference address:
http://www.w3school.com.cn/html5/html_5_canvas.asp
http://www.cnblogs.com/Abner5/p/5845367.html
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
.title {
color:#444;font-weight:bold;padding:5px;
}
</style>
</head>
<body>
<div class="title">Canvas Drawing (Line Drawing):</div>
<canvas id="myCanvas1" width="300px" height="300px" style="border:2px solid #bbb;">Your browser does not support the canvas tag. </canvas>
<div class="title">Canvas drawing (circle) arc(x, y, radius, startRad, endRad, anticlockwise):</div>
<canvas id="myCanvas2" width="300px" height="300px" style="border:2px solid #bbb;">Your browser does not support the canvas tag. </canvas>
<div class="title">Canvas drawing (circle) arcTo(x1, y1, x2, y2, radius):</div>
<canvas id="myCanvas3" width="300px" height="200px" style="border:2px solid #bbb;">Your browser does not support the canvas tag. </canvas>
<div class="title">Canvas drawing (over color):</div>
<canvas id="myCanvas4" width="300px" height="200px" style="border:2px solid #bbb;">Your browser does not support the canvas tag. </canvas>
<div class="title">Canvas drawing (put pictures directly):</div>
<canvas id="myCanvas5" width="300px" height="200px" style="border:2px solid #bbb;">Your browser does not support the canvas tag. </canvas>
</body>
</html>
javascript：
/**
* Line drawing
*/
var myCanvas1 = document.getElementById("myCanvas1");
if(myCanvas1.getContext) {
var ctx1 = myCanvas1.getContext("2d");
ctx1.fillStyle = '#D5B081'; // line fill color
ctx1.moveTo(50, 150); // reset the starting point
ctx1.lineTo(80, 260);
ctx1.lineTo(230, 260);
ctx1.lineTo(250, 150);
ctx1.lineTo(190, 180);
ctx1.lineTo(120, 180);
ctx1.lineTo(50, 150);
ctx1.moveTo(155, 180); // reset the starting point
ctx1.lineTo(155, 50);
ctx1.moveTo(155, 150); // reset the starting point
ctx1.lineTo(100, 120);
ctx1.moveTo(155, 100); // reset the starting point
ctx1.lineTo(120, 70);
ctx1.moveTo(155, 170); // reset the starting point
ctx1.lineTo(200, 80);
ctx1.lineWidth = 10; // line width
ctx1.lineCap = 'round'; // The end point of the line. lineCap has 3 values: butt (flat, default), round (circle), square (square)
ctx1.lineJoin = 'round'; // At the intersection of lines, there are 3 attributes: miter (default, sharp corner), bevel (beveled corner), round (rounded corner)
//ctx1.closePath(); //Close the path, gap processing at the intersection
ctx1.strokeStyle = '#844C10'; // stroke color
ctx1.stroke(); // draw a line
ctx1.fill(); // fill the area
}
/**
* draw a circle arc(x, y, radius, startRad, endRad, anticlockwise)
*/
var myCanvas2 = document.getElementById("myCanvas2");
if(myCanvas2.getContext) {
var ctx2 = myCanvas2.getContext("2d");
ctx2.fillStyle = '#D5B081'; // line fill color
ctx2.lineWidth = 10;
//Start a new drawing path
ctx2.beginPath();
//Set the arc color to blue
ctx2.strokeStyle = "#844C10";
var circle = {
x : 150, //The x-axis coordinate value of the center of the circle
y : 150, //The y-axis coordinate value of the center of the circle
r : 100 //The radius of the circle
};
var startRad = 0; // start radian
var endRad = Math.PI*2; // end radians 0 < endRad <= 2
var anticlockwise = false; // false: draw clockwise, true: draw counterclockwise
//Draw the arc along the clockwise direction of the circle with the coordinate point (100,100) as the center and the radius of 50px
ctx2.arc(circle.x, circle.y, circle.r, startRad, endRad, anticlockwise);
//Draw the arc according to the specified path
ctx2.stroke();
ctx2.fill(); // fill the area
}
/**
* draw a circle arcTo(x1, y1, x2, y2, radius)
*/
var myCanvas3 = document.getElementById("myCanvas3");
if(myCanvas3.getContext){
//Get the corresponding CanvasRenderingContext2D object (brush)
var ctx3 = myCanvas3.getContext("2d");
//Specify the starting point of the drawing path
ctx3.moveTo(50, 50);
//Comment out lineTo(), no longer draw the line first
ctx3.lineTo(140, 30);
//At this point, the coordinate point (140,30) is the current endpoint when drawing the arc
//endpoint 1
var p1 = {
x : 260,
and : 50
};
//endpoint 2
var p2 = {
x : 240,
and : 100
};
//Draw an arc of a circle with a radius of 80px that is tangent to both sides of the angle formed by the current endpoint, endpoint 1, and endpoint 2
ctx3.arcTo(p1.x, p1.y, p2.x, p2.y, 80);
ctx3.lineWidth = 10;
//set the line color to blue
ctx3.strokeStyle = "blue";
//Draw the arc according to the above drawing path
ctx3.stroke();
}
/**
* Canvas drawing (over color)
*/
var myCanvas4 = document.getElementById("myCanvas4");
if(myCanvas4.getContext) {
var ctx4 = myCanvas4.getContext("2d");
//Set a variable, linear gradient
var grd = ctx4.createLinearGradient(0, 0, 500, 0); //(xStart, yStart) start point, (xEnd, yEnd) end point
grd.addColorStop(0, '#ff0'); //offset range is a floating point number between 0 and 1, color is the key color
grd.addColorStop(0.5, '#f30');
grd.addColorStop(1, '#7fc259');
ctx4.fillStyle = grd;
ctx4.fillRect(0, 0, 500, 500);
//radial gradient
ctx4.beginPath(); //begin
var grdCirle = ctx4.createRadialGradient(100, 100, 50, 100, 100, 100);
//(xStart, yStart, radiusStart) the coordinates and radius of the center point of the starting point circle, (xEnd, yEnd, radiusEnd) the coordinates and radius of the center point of the end point circle
grdCirle.addColorStop(0, "#f7f8fa"); //起点
grdCirle.addColorStop(0.5, "red");
grdCirle.addColorStop(1, "#53c5d9"); //End point
ctx4.fillStyle = grdCirle;
ctx4.arc(100, 100, 100, 0, 2 * Math.PI); //Draw a circle
ctx4.fill(); //fill
ctx4.closePath(); //Close
ctx4.beginPath();
var graA = ctx4.createRadialGradient (300, 100, 50, 310, 110, 20);
graA.addColorStop(0, "#632cd2");
graA.addColorStop(0.3, "#91bd1c");
graA.addColorStop(0.7, "#e06a29");
graA.addColorStop(1, "#27cd46");
ctx4.fillStyle = graA;
ctx4.arc(300, 100, 100, 0, 2 * Math.PI);
ctx4.fill();
ctx4.closePath();
ctx4.translate(250, 250);//Move the origin of coordinates
// coordinate transformation
for(var i = 0; i < 30; i++) {
ctx4.rotate(Math.PI/10);//Rotation angle
ctx4.scale(0.95,0.95);//Reduce the scale
ctx4.beginPath();
ctx4.fillStyle = "rgba(255,157,0,0.5)";
ctx4.fillRect(100, 100, 120, 60);
ctx4.closePath();
}
}
/**
* Canvas drawing (put pictures directly)
*/
var myCanvas5 = document.getElementById("myCanvas5");
if(myCanvas5.getContext) {
var ctx5 = myCanvas5.getContext("2d");
var img=new Image();
img.src="flower.png"; // image address
cxt5.drawImage(img,0,0);
}
