1 "What canvas that?
a) is a new tag html5
b) is a canvas, a pattern can be added through the js api
2 "What canvas can do? Use Scenarios Scenario:
1 "2 games" painted pattern
3 "canvas Use
a) <canvas></canvas>
b) create a 2d objects getContext ( "2d") ps: 3d need to support plug-ins
c) drawn content
4 "canvas filled
First, there are filling
fillStyle === "Color
fillRect ===" position, size
Second, no padding
****
Canvas canvas width and height, it is generally defined in the js, css if define the width and height, inner elements will be affected
5 "canvas painting lines
1> starting point: the moveTo (X, Y);
2> End point: the lineTo (X, Y);
. 3> Start Videos: stroke ()
Auxiliary:
Line thickening: 2D objects .lineWidth = 5
line color: 2D objects .strokeStyle = 'red'
Fill color:
2D objects = .fillStyle 'Red'
2D objects .fill () == "method can only be filled once added
1 "beginPath: method starts a path, or reset the current path.
2 "closePath: method to create a path from the current point to the start point.
6 "canvas circle
2d objects .arc ()
arc(x,y,r,sAngle,eAngle,counterclockwise);
x: lateral position
y: vertical position
r: radius
sAngle: starting
eAngle: end point
counterclockwise: direction
false ==> clockwise
The following is written in several cases
1. FIG Taiji
Source
<canvas id="mycanvas"></canvas> <script> var mycanvas = document.getElementById("mycanvas"); mycanvas.width = 500; mycanvas.height = 500; var cvs = mycanvas.getContext("2d"); // 左边黑圆 cvs.arc(300, 300, 150, 0, 2 * Math.PI); cvs.strokeStyle = "#ccc " cvs.stroke (); cvs.fillStyle = " # 000 " ; cvs.fill (); // the right white circles cvs.beginPath (); cvs.arc ( 300 , 300 , 150 , for 1.5 * Math.PI , 0.5 * Math.PI); // cvs.strokeStyle = "# CCC" cvs.stroke (); cvs.fillStyle = " #FFF " ; cvs.fill (); // upper black circle cvs.beginPath (); cvs.arc ( 300, 225, 75, 0, 2 * Math.PI); cvs.strokeStyle = "#000" cvs.stroke(); cvs.fillStyle = "#000"; cvs.fill(); // 下边白圆 cvs.beginPath(); cvs.arc(300, 375, 75, 0, 2 * Math.PI); cvs.strokeStyle = "#fff" cvs.stroke(); cvs.fillStyle = " #fff " ; cvs.fill (); // upper black circles in white circles cvs.beginPath (); cvs.arc ( 300 , 220 , 30 , 0 , 2 * Math.PI); CVS. the strokeStyle = " #fff " cvs.stroke (); cvs.fillStyle = " #fff " ; cvs.fill (); // upper white circles in black circles cvs.beginPath (); cvs.arc ( 300 , 375 , 30 , 0, 2 * Math.PI); cvs.strokeStyle = "#000" cvs.stroke(); cvs.fillStyle = "#000"; cvs.fill();
2. Watches
Source
<Canvas ID = "MyCanvas"> </ Canvas>
<Script> var MyCanvas = document.getElementById ( "MyCanvas" );
mycanvas.width = 800 ;
mycanvas.height = 500 ;
var CVS = mycanvas.getContext ( "2D" ) ;
// cvs.moveTo (50, 50); // cvs.arc (50, 50, 50, 0, *. 6 Math.PI / 180 [); function Time () {
// draw with scale prototype var X = 200 is ;
Y = 200 is ;
R & lt = 200 is ;
// get the current time
DATE = new new
DATE ();
hour = date.getHours ();
minutes = date.getMinutes ();
seconds The = date.getSeconds ();
// to 90 degrees minus the required half hour min / 2
var H = (- 90 + hour * 30+ (minutes / 2)) * Math.PI / 180 [ ;
var M = (- + 90 minutes *. 6) * Math.PI / 180 [;
var S = (- + 90 seconds The *. 6) * Math.PI / 180 [ ;
cvs.arc (X, Y, R & lt, 0, Math.PI * 360/180 [ );
cvs.strokeStyle = "#ccc" ;
cvs.stroke ();
cvs.closePath ();
cvs.beginPath ();
/ / minute hand scale k
for ( var0 = I; I <60; I ++ ) {
cvs.moveTo (X, Y);
cvs.arc (X, Y, R & lt, I * * Math.PI. 6/180 [, (+ I. 1) * * the Math. 6. the PI / 180 [ );
}
cvs.strokeStyle = "# 000" ;
cvs.stroke ();
cvs.closePath ();
// with a round cover, flows only short scale
cvs.beginPath ();
cvs.arc (X, Y , R & lt * (. 19/20 is), 0, 2 * Math.PI);
cvs.fillStyle = "#fff" ;
cvs.fill ();
cvs.strokeStyle = "#fff" ;
cvs.stroke ();
// hour scale
cvs.beginPath ();
for( Var I = 0; I <12 is; I ++ ) {
cvs.moveTo (X, Y);
cvs.arc (X, Y, R & lt, I * 30 * Math.PI / 180 [, (+ I. 1) * 30 * Math.PI / 180 [ );
}
cvs.lineWidth =. 3 ;
cvs.strokeStyle = "# 000" ;
cvs.stroke ();
// with a round cover, flows only short scale
cvs.beginPath ();
cvs.arc (X , Y, R & lt * (18 is / 20 is), 0, 2 * Math.PI);
cvs.fillStyle = "#fff" ;
cvs.fill ();
cvs.strokeStyle = "#fff" ;
cvs.stroke ();
// hour
cvs.beginPath();
cvs.moveTo(x, y);
cvs.arc(x, y, r * (8 / 20), H, H);
cvs.lineWidth =5;
cvs.strokeStyle = "#000";
cvs.stroke();
// 分针
cvs.beginPath();
cvs.moveTo(x, y);
cvs.arc(x, y, r * (13 / 20), M, M);
cvs.lineWidth = 3;
cvs.strokeStyle = "#000";
cvs.stroke();
//秒针
cvs.beginPath();
cvs.moveTo(x, y);
cvs.arc(x, y, r * (17 / 20), S, S);
cvs.lineWidth = 1;
cvs.strokeStyle = "#000";
cvs.stroke();
}
time();
setInterval(time,1000)
3. Line Chart
Source
<canvas id="mycanvas" width="700" height="500"></canvas>
<script>
function lineChart(obj, dom) {
var cvs = dom.getContext("2d");
width = dom.width;
height = dom.height;
data = obj;
len = data.x.length;
//间隔宽
stepwidth = (width - 80) / (len - 1);
//间隔高
stepheight = (height - 80) / (data.y.length - 1);
move = [40, 40];
line = [40, height - 40];
//竖线
for (var i = 0; i < len; i++) {
cvs.beginPath();
cvs.fillText(data.x[i], line[0] - 13, line[1] + 20);
cvs.moveTo(move[0], move[1]);
cvs.lineTo(line[0], line[1]);
move[0] += stepwidth;
line[0] += stepwidth;
cvs.stroke();
}
//单位
cvs.fillText(data.yuninit, 40, 30);
//横线
var start = [40, 40];
var end = [width - 40, 40]
for (var i = 0; i < data.y.length; i++) {
cvs.beginPath();
cvs.fillText(data.y[i], start[0] - 20, (height - 40) - (i * stepheight));
cvs.moveTo(start[0], start[1]);
cvs.lineTo(end[0], end[1]);
start[1] += stepheight;
end[1] += stepheight;
cvs.stroke();
}
//折线
for (var i = 0; i < data.line.length; i++) {
var item = data.line[i].data;
cvs.strokeStyle = data.line[i].color;
for (var j = 0; j < item.length; j++) {
cvs.beginPath();
cvs.moveTo(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40);
cvs.lineTo(40 + (j + 1) * stepwidth, height - (height - 80) * (item[j + 1] / data.y[data.y.length -
1]) - 40);
cvs.stroke();
//点呈圆形
cvs.beginPath();
cvs.arc(40 + j * stepwidth, height - (height - 80) * (item[j] / data.y[data.y.length - 1]) - 40, 5,
0, 2 * Math.PI);
cvs.fillStyle = "#fff";
cvs.fill();
cvs.stroke();
}
}
}
new lineChart({
x: ["1月", "2月", "3月", "4月", "5月", "6月"],
y: [0, 50, 100, 150, 200, 250, 300],
yuninit: "万元",
line: [{
color: "red",
data: [50, 80, 100, 300, 270, 160]
},
{
color: "blue",
data: [30, 90, 150, 280, 170, 120]
},
]
}, document.getElementById("mycanvas"))