这次给大家带来js怎么封装Canvas成插件，js封装Canvas成插件的注意事项有哪些，下面就是实战案例，一起来看一下。
之前就说过，我想写一个canvas画统计图的插件，现在写好了
先说下实现的功能吧：
1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图
2.可以选择画折现图还是柱形统计图，或者两者都实现
3.可以自由定义折现颜色，坐标颜色，柱形图颜色 和canvas边框颜色，当然边框你也可以选择要或者不要
4.可以选择是否实现柱形图和折现图的动画实现
实现过程
画坐标——画箭头——做X轴和Y轴的标注——画柱形图——画折现图
话不多说，上代码
(function(window,document){
var ChartDraws = function(options){
if(!(this instanceof ChartDraws))return new ChartDraws(options);
this.options = $.extend({
//报表所需的参数
"containerId" : "", //canvas所在容器id
"canvasWidth" : 400,
"canvasHeight" : 300,
"paddingLeft" : 20,
"paddingTop" : 20,
"columnChartData" :[], //柱形图的数量和对应得名称以及百分比
"yChartData" :[], //y轴的数量及名称
"axisColor" : "white", //坐标轴颜色
"columnChartColor" : "#EEE685", //柱形图颜色
"isNeedAnimation" : true, //是否需要动画
"isNeedLineChart" : true, //是否需要折线图
"isNeedColumnChart" : true, //是否需要柱形图
"lineChartColor" : "#90EE90", //折线图颜色，当isNeedLineChart=true时有效
"isNeedBorder" : false, //canvas是否需要外边框
"borderColor" : "white" //外边框颜色
},options);
if(this.options.canvasWidth<=500)
{
this.axisBorderWidth = 3;
this.fontSize = 8;
}
else if(this.options.canvasWidth<=800){
this.axisBorderWidth = 4;
this.fontSize = 12;
}
else{
this.axisBorderWidth = 5;
this.fontSize = 16;
}
var self = this;
_init();
function _init(){
var canvasDom = document.createElement("canvas");
canvasDom.id = self.options.containerId+"_"+"canvas";
canvasDom.width = self.options.canvasWidth;
canvasDom.height = self.options.canvasHeight;
if(self.options.isNeedBorder){
canvasDom.style.borderWidth = 1;
canvasDom.style.borderStyle = "solid";
canvasDom.style.borderColor = self.options.borderColor;
}
document.getElementById(self.options.containerId).appendChild(canvasDom);
self.context = document.getElementById(self.options.containerId+"_"+"canvas");
self.ctx = self.context.getContext("2d");
_drawAxis();
}
function _drawAxis(){
var XYData =transformAxis( [{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop}]);
self.ctx.strokeStyle=self.options.axisColor;
drawLine(self.ctx,XYData,self.axisBorderWidth);
//画三角箭头
//画y轴三角箭头
drawLine(self.ctx,transformAxis([{x:self.options.paddingLeft-self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2},{x:self.options.paddingLeft,y:self.options.canvasHeight-self.options.paddingTop},{x:self.options.paddingLeft+self.axisBorderWidth,y:self.options.canvasHeight-self.options.paddingTop-self.axisBorderWidth*2}]),self.axisBorderWidth);
//画x轴三角箭头
drawLine(self.ctx,transformAxis([{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop+self.axisBorderWidth},{x:self.options.canvasWidth-self.options.paddingLeft,y:self.options.paddingTop},{x:self.options.canvasWidth-self.options.paddingLeft-self.axisBorderWidth*2,y:self.options.paddingTop-self.axisBorderWidth}]),self.axisBorderWidth);
_drawCoordinatePoints();
}
function _drawCoordinatePoints(){
self.reactAngleWidth = (1-2*0.04)*(self.options.canvasWidth-(2*self.options.paddingLeft))/(self.options.columnChartData.length*2-1);
self.lineDataList = [];
for(var i = 0;i2)
{
for(var i=1;i
下面还有一个是实现requestAnimationFrame浏览器兼容的
(function(){
var lastTime = 0;
var prefixes = ['ms','webkit','o','moz']; //各浏览器前缀
var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;
var prefix;
//通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for( var i = 0; i < prefixes.length; i++ ) {
if ( requestAnimationFrame && cancelAnimationFrame ) {
break;
}
prefix = prefixes[i];
requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
}
//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if ( !requestAnimationFrame || !cancelAnimationFrame ) {
requestAnimationFrame = function( callback, element ) {
var currTime = new Date().getTime();
//为了使setTimteout的尽可能的接近每秒60帧的效果
var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) );
var id = window.setTimeout( function() {
callback( currTime + timeToCall );
}, timeToCall );
lastTime = currTime + timeToCall;
return id;
};
cancelAnimationFrame = function( id ) {
window.clearTimeout( id );
};
}
window.requestAnimationFrame = requestAnimationFrame;
window.cancelAnimationFrame = cancelAnimationFrame;
}());
附上
ChartDraws({
"containerId" : "chart1", //canvas所在容器id
"canvasWidth" : 1000,
"canvasHeight" : 250,
"paddingLeft" : 50,
"paddingTop" : 50,
"columnChartData": [
{NO:0,PT:0.2,Name:"Html/Css"},
{NO:1,PT:0.4,Name:"Html5/Css3"},
{NO:2,PT:0.4,Name:"JavaScript"},
{NO:3,PT:0.5,Name:"JQuery"},
{NO:4,PT:0.2,Name:"Angular.js"},
{NO:5,PT:0.8,Name:"BootStrap"},
{NO:6,PT:0.6,Name:"React.js"},
{NO:7,PT:0.5,Name:"Java"}
],
"yChartData" : [
{NO:0,Name:"熟悉"},
{NO:1,Name:"掌握"},
{NO:2,Name:"精通"}
],
"isNeedAnimation" : false,
"isNeedBorder" : false,
"isNeedLineChart":true,
"axisColor" : "#8DEEEE"
});
ChartDraws({
"containerId" : "chart2", //canvas所在容器id
"canvasWidth" : 1000,
"canvasHeight" : 250,
"paddingLeft" : 50,
"paddingTop" : 50,
"columnChartData": [
{NO:0,PT:0.4,Name:"Html/Css"},
{NO:1,PT:0.5,Name:"Html5/Css3"},
{NO:2,PT:0.2,Name:"JavaScript"},
{NO:3,PT:0.7,Name:"JQuery"},
{NO:4,PT:0.2,Name:"Angular.js"},
{NO:5,PT:0.3,Name:"BootStrap"},
{NO:6,PT:0.8,Name:"React.js"},
{NO:7,PT:0.2,Name:"Java"}
],
"yChartData" : [
{NO:0,Name:"熟悉"},
{NO:1,Name:"掌握"},
{NO:2,Name:"精通"}
],
"isNeedAnimation" : false,
"isNeedBorder" : false,
"isNeedLineChart":false,
"isNeedColumnChart" : true,
"columnChartColor":"#9370DB"
});
ChartDraws({
"containerId" : "chart3", //canvas所在容器id
"canvasWidth" : 1000,
"canvasHeight" : 250,
"paddingLeft" : 50,
"paddingTop" : 50,
"columnChartData": [
{NO:0,PT:0.4,Name:"Html/Css"},
{NO:1,PT:0.5,Name:"Html5/Css3"},
{NO:2,PT:0.2,Name:"JavaScript"},
{NO:3,PT:0.7,Name:"JQuery"},
{NO:4,PT:0.2,Name:"Angular.js"},
{NO:5,PT:0.3,Name:"BootStrap"},
{NO:6,PT:0.8,Name:"React.js"},
{NO:7,PT:0.2,Name:"Java"}
],
"yChartData" : [
{NO:0,Name:"熟悉"},
{NO:1,Name:"掌握"},
{NO:2,Name:"精通"}
],
"isNeedAnimation" : false,
"isNeedBorder" : true,
"isNeedLineChart":true,
"isNeedColumnChart" : false,
"lineChartColor" : "#8DB6CD",
"borderColor" : "#87CEFA"
})
html代码
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
