Canvas Example Application 100 +This column provides basic knowledge of canvas, advanced animation, related application extensions and other information.
As a part of HTML, canvas is an important foundation for the visualization of images, icons and maps. Learning canvas will be very important in other applications.
Article directory
-
- renderings
- source code
- canvas basic properties
- canvas basic methods
Canvas can draw histograms. The following is an example, which mainly uses lineWidth, beginPath, lineCap and other knowledge points.
Renderings
Source code
<!DOCTYPE Html>
<html>
<head>
<title>Line Chart Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<header>Number of people making reservations (<span id="hosUnitDiv"></span>)</header>
<canvas id="canvas2">Your browser does not support canvas, please change to a higher version of the browser! </canvas>
<script type="text/javascript" >
/*Progress bar chart*/
var progressChart = {<!-- -->
// draw chart
drawChart: function(canvas2, data, padding, marginRight, ygap, bgLineColor, scaleColor) {<!-- -->
this.canID2 = document.getElementById("canvas2");
this.content2 = this.canID2.getContext("2d");
// this.canID2.width = 400;
var canRealWidth = this.canID2.width - marginRight; // The real width of the image (a certain distance from the right canvas
var dataMax = this.getArrayMax(data); //The largest value in the data
var unit = this.getUnitByDataMax(dataMax); // unit
var xlimt = this.getXLimtByNewData(dataMax / (unit.number)); // x-axis scale array
var xgap = (canRealWidth - padding) / (xlimt.length - 1); // x-axis scale spacing
var newData = this.getNewDataByUnit(data, unit.number);
var ymove = 5; // Move the y-axis of the entire graph downward to solve the problem of incomplete display when 0 is reached.
this.canID2.height = ygap * (data.length) + ymove * 4;
// Draw x-axis scale
for(var i=0; i<xlimt.length; i + + ) {<!-- -->
// console.log(i*xgap + padding);
this.content2.fillStyle = scaleColor;
// this.content2.textAlign = "left";
//The if statement solves the last scale problem by aligning the right end of the image
if(i === xlimt.length -1) {<!-- -->
this.content2.fillText(xlimt[i],i*xgap + padding - 16, ygap*data.length + ygap);
} else {<!-- -->
this.content2.fillText(xlimt[i],i*xgap + padding, ygap*data.length + ygap);
}
}
for(var i=0; i<data.length; i + + ) {<!-- -->
// draw horizontal line
this.content2.lineWidth=8;
this.content2.strokeStyle=bgLineColor;//stroke color
this.content2.beginPath();
this.content2.moveTo(padding, ygap*i + ymove);
this.content2.lineTo(canRealWidth, ygap*i + ymove);
this.content2.lineCap = 'round';
this.content2.stroke();
this.content2.closePath();
// y-axis scale
this.content2.fillStyle = scaleColor;
this.content2.textAlign = "left";//The y-axis text is written to the right
// this.content2.textBaseline = "middle";//Adjustment of the center line of text
this.content2.font = '12px PingFang HK';
this.content2.fillText(data[i].y, 0, ygap*i + 10);
//Draw the real data line
/* Draw gradient color lines */
this.content2.beginPath();
var linear_gradient = this.content2.createLinearGradient(0,0, canRealWidth,50);
linear_gradient.addColorStop(0, '#5c80cd');
linear_gradient.addColorStop(1, '#ac92d3');
this.content2.strokeStyle = linear_gradient;
this.content2.lineJoin = 'round';
this.content2.lineWidth = 8;
this.content2.strokeRect(padding, ygap*i + ymove, newData[i].x * (canRealWidth - padding) / xlimt[xlimt.length - 1], 0);
}
return unit;
},
// Judgment unit based on the largest data on the x-axis params: the largest value in the original data
getUnitByDataMax: function(maxData) {<!-- -->
if(maxData > 1000 & amp; & amp; maxData <= 10000) {<!-- -->
return unit = {<!-- -->text: 'hundred people', number: 100};
} else if(maxData > 10000) {<!-- -->
return unit = {<!-- -->text: '千人', number: 1000};
}
},
// Get the x-axis scale params: the maximum value of the original data after unit processing
getXLimtByNewData: function(handleByUnitNewdataMax) {<!-- -->
if (handleByUnitNewdataMax > 0 & amp; & amp; handleByUnitNewdataMax <= 50) {<!-- -->
return xlimt = [0, 10, 20, 30, 40, 50];
} else {<!-- -->
return xlimt = [0, 20, 40, 60,80, 100];
}
},
//Process the original data according to the unit and obtain new data
getNewDataByUnit: function(data, unit) {<!-- -->
var canvas2NewData = [];
// var canvas2NewData = canvas2Data.map(function(item) {<!-- -->
// item.x = item.x /unit;
// }); ? Why can't map
for (var i = 0; i < canvas2Data.length; i + + ) {<!-- -->
canvas2NewData[i] = {<!-- -->y: canvas2Data[i].y, x:canvas2Data[i].x / unit};
};
return canvas2NewData;
},
// Get the maximum value of the x-axis
getArrayMax: function(array) {<!-- -->
return array.reduce(function(prev, next) {<!-- -->
if (prev.x > next.x) {<!-- --> return prev.x;} else {<!-- -->return next.x};
});
}
}
</script>
<script>
/*Progress bar chart*/
var canvas2Data = [
{<!-- -->x:520, y:'January'},
{<!-- -->x:1000, y:'February'},
{<!-- -->x:600, y:'March'},
{<!-- -->x:2100, y:'April'},
{<!-- -->x:3400, y:'May'},
{<!-- -->x:3600, y:'June'},
{<!-- -->x:4000, y:'July'},
{<!-- -->x:6000, y:'August'},
{<!-- -->x:7000, y:'September'},
{<!-- -->x:9000, y:'October'}
];
var hosUnit = progressChart.drawChart(canvas2, canvas2Data, 30, 10, 13, '#bcc0c7', '#fff');
document.getElementById('hosUnitDiv').innerText = hosUnit.text;
</script>
</body>
</html>
\t\t\t\t\t\t\t
Basic properties of canvas
| Properties | Properties | Properties |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
Basic methods of canvas
| method | method | method |
|---|---|---|
| arc() | arcTo() | addColorStop() |
| beginPath() | bezierCurveTo() | clearRect() |
| clip() | close() | closePath() |
| createImageData() | createLinearGradient() | createPattern() |
| createRadialGradient() | drawFocusIfNeeded() | drawImage() |
| ellipse() | fill() | fillRect() |
| fillText() | getImageData() | getLineDash() |
| isPointInPath() | isPointInStroke() | lineTo() |
| measureText() | moveTo() | putImageData() |
| quadraticCurveTo() | rect() | restore() |
| rotate() | save() | scale() |
| setLineDash() | setTransform() | stroke() |
| strokeRect() | strokeText() | transform() |
| translate() |