How to encapsulate Canvas into a plug-in in js
This time I will show you how to encapsulate jsCanvas into a plug-in. What are the precautions for encapsulating Canvas into a plug-in with js. The following is a practical case, let’s take a look.
I have said before that I want to write a plug-in for drawing statistical charts on canvas, and now I have written it
Let’s talk about the implemented functions first:
1. Statistical charts can be drawn proportionally by customizing the X-axis coordinate attributes and Y-axis coordinate attributes
2. You can choose to draw a discount chart or a column chart, or both
3. You can freely define the discount color, coordinate color, column color and canvas border color. Of course, you can also choose whether or not to have the border
4. You can choose whether to implement the animation of column charts and discount charts
Implementation process
Draw coordinates - draw arrows - mark the X-axis and Y-axis - draw a column chart - draw a discount chart
Without further ado, here’s the code
(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;i<self.options.columnChartData.length;i++)
{
drawXText(self.ctx,2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,self.options.paddingTop/2,self.options.columnChartData[i].Name);
self.lineDataList.push({
x:2*self.options.columnChartData[i].NO*self.reactAngleWidth+self.options.paddingLeft+0.04*(self.options.canvasWidth-(2*self.options.paddingLeft))+self.reactAngleWidth/2,
y:self.options.canvasHeight-(self.options.paddingTop+(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[i].PT)
})
}
//画Y轴title 画y轴虚线
self.reactAngleHeight = (self.options.canvasHeight-2*self.options.paddingTop)/(self.options.yChartData.length+1);
for(var j = 0;j<self.options.yChartData.length;j++)
{
drawYText(self.ctx,3*self.options.paddingLeft/4,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.yChartData[j].Name);
//画虚线
drawDottedLine(self.ctx,self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-self.options.paddingLeft,self.options.paddingTop+self.reactAngleHeight*(j+1),self.options.canvasWidth-2*self.options.paddingLeft,10,self.axisBorderWidth/2);
}
_drawColumnChart();
}
function _drawColumnChart(){
//柱形图循环
var reactAngleTimer = 1;
function loopColumnChart()
{
var columnChartLooped = window.requestAnimationFrame(loopColumnChart);
if(reactAngleTimer<=100)
{
for(var k=0;k<self.options.columnChartData.length;k++)
{
self.ctx.fillStyle =self.options.columnChartColor;
drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT*reactAngleTimer/100);
}
reactAngleTimer++;
}
else
{
window.cancelAnimationFrame(columnChartLooped);
columnChartLooped = null;
reactAngleTimer = 1;
if(self.options.isNeedLineChart)
{
loopLineChart();
}
}
}
//折线图循环
var lineTimer = 0;
function loopLineChart()
{
var lineChartLooped = window.requestAnimationFrame(loopLineChart);
if(lineTimer<self.lineDataList.length-1)
{
self.ctx.lineWidth = 2*self.axisBorderWidth/3;
if(lineTimer == 0)
{
drawCircle(self.ctx,self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
}
drawCircle(self.ctx,self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
self.ctx.beginPath();
self.ctx.moveTo(self.lineDataList[lineTimer].x,self.lineDataList[lineTimer].y);
self.ctx.lineTo(self.lineDataList[lineTimer+1].x,self.lineDataList[lineTimer+1].y);
self.ctx.strokeStyle = self.options.lineChartColor;
self.ctx.lineWidth = 2*self.axisBorderWidth/3;
self.ctx.stroke();
lineTimer++;
}
else
{
window.cancelAnimationFrame(lineChartLooped);
lineChartLooped = null;
lineTimer = 0;
}
}
//画柱形图
function drawRectangle(context,x,y,width,height){
context.beginPath();
context.fillRect(x,y,width,height);
}
//画圆
function drawCircle(context,x,y){
context.beginPath();
context.arc(x,y,self.axisBorderWidth/2,0,2*Math.PI,true);
context.strokeStyle=self.options.lineChartColor;
context.stroke();
context.closePath();
}
if(self.options.isNeedAnimation)
{
if(self.options.isNeedColumnChart)
{
loopColumnChart();
}
else
{
if(self.options.isNeedLineChart) {
loopLineChart();
}
}
}
else
{
if(self.options.isNeedColumnChart)
{
for(var k=0;k<self.options.columnChartData.length;k++)
{
self.ctx.fillStyle =self.options.columnChartColor;
drawRectangle(self.ctx,self.lineDataList[k].x-self.reactAngleWidth/2,self.options.canvasHeight-((self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT+self.options.paddingTop),self.reactAngleWidth,(self.options.canvasHeight-2*self.options.paddingTop)*self.options.columnChartData[k].PT);
}
}
if(self.options.isNeedLineChart) {
for (var l = 0; l < self.lineDataList.length - 1; l++) {
self.ctx.lineWidth = 4;
if (l == 0) {
drawCircle(self.ctx, self.lineDataList[l].x, self.lineDataList[l].y);
}
drawCircle(self.ctx, self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
self.ctx.beginPath();
self.ctx.moveTo(self.lineDataList[l].x, self.lineDataList[l].y);
self.ctx.lineTo(self.lineDataList[l + 1].x, self.lineDataList[l + 1].y);
self.ctx.strokeStyle = self.options.lineChartColor;
self.ctx.lineWidth = 2*self.axisBorderWidth/3;
self.ctx.stroke();
}
}
}
}
function transformAxis(data)
{
var newData=[];
for(var i=0;i<data.length;i++){
newData.push({
x:data[i].x,
y:self.options.canvasHeight-data[i].y
})
}
return newData;
}
function drawLine(context,point,width){
context.beginPath();
context.moveTo(point[0].x,point[0].y);
if(point.length>2)
{
for(var i=1;i<point.length;i++)
{
context.lineTo(point[i].x,point[i].y);
}
}
context.lineWidth = width;
context.lineJoin='round';
context.stroke();
context.closePath();
}
//画y轴title
function drawYText(context,x,y,str) {
context.beginPath();
context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");
context.fillStyle = 'white';
context.textAlign = 'right';
context.fillText(str,x,self.options.canvasHeight-y);
context.closePath();
}
//画x轴title
function drawXText(context,x,y,str) {
context.beginPath();
context.font = '{fontSize} Microsoft Yahei'.replace("{fontSize}",self.fontSize+"px");
context.fillStyle = 'white';
context.textAlign = 'center';
context.fillText(str,x,self.options.canvasHeight-y);
context.closePath();
}
function drawDottedLine(context,x1,y1,x2,y2,totalLength,length,lineWidth){
y1 = self.options.canvasHeight-y1;
y2 = self.options.canvasHeight-y2;
var dashLen = length === undefined ? 5 : length;
//计算有多少个线段
context.beginPath();
var num = Math.floor(totalLength/dashLen);
context.lineWidth = lineWidth;
for(var i = 0 ; i < num; i++)
{
context[i%2==0 ? 'moveTo' : 'lineTo'](x1+(x2-x1)/num*i,y1+(y2-y1)/num*i);
}
context.stroke();
}
};
window.ChartDraws = ChartDraws;
}(window,document));There is another one below that implements requestAnimationFrame browser compatibility
(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;
}());Attached
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
TrendForce: Nvidia's Blackwell platform products drive TSMC's CoWoS production capacity to increase by 150% this year
Apr 17, 2024 pm 08:00 PM
According to news from this site on April 17, TrendForce recently released a report, believing that demand for Nvidia's new Blackwell platform products is bullish, and is expected to drive TSMC's total CoWoS packaging production capacity to increase by more than 150% in 2024. NVIDIA Blackwell's new platform products include B-series GPUs and GB200 accelerator cards integrating NVIDIA's own GraceArm CPU. TrendForce confirms that the supply chain is currently very optimistic about GB200. It is estimated that shipments in 2025 are expected to exceed one million units, accounting for 40-50% of Nvidia's high-end GPUs. Nvidia plans to deliver products such as GB200 and B100 in the second half of the year, but upstream wafer packaging must further adopt more complex products.
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
AMD 'Strix Halo” FP11 package size exposed: equivalent to Intel LGA1700, 60% larger than Phoenix
Jul 18, 2024 am 02:04 AM
This website reported on July 9 that the AMD Zen5 architecture "Strix" series processors will have two packaging solutions. The smaller StrixPoint will use the FP8 package, while the StrixHalo will use the FP11 package. Source: videocardz source @Olrak29_ The latest revelation is that StrixHalo’s FP11 package size is 37.5mm*45mm (1687 square millimeters), which is the same as the LGA-1700 package size of Intel’s AlderLake and RaptorLake CPUs. AMD’s latest Phoenix APU uses an FP8 packaging solution with a size of 25*40mm, which means that StrixHalo’s F
How do C++ functions improve the efficiency of GUI development by encapsulating code?
Apr 25, 2024 pm 12:27 PM
By encapsulating code, C++ functions can improve GUI development efficiency: Code encapsulation: Functions group code into independent units, making the code easier to understand and maintain. Reusability: Functions create common functionality that can be reused across applications, reducing duplication and errors. Concise code: Encapsulated code makes the main logic concise and easy to read and debug.
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
Explore the powerful role and application of canvas in game development
Jan 17, 2024 am 11:00 AM
Understand the power and application of canvas in game development Overview: With the rapid development of Internet technology, web games are becoming more and more popular among players. As an important part of web game development, canvas technology has gradually emerged in game development, showing its powerful power and application. This article will introduce the potential of canvas in game development and demonstrate its application through specific code examples. 1. Introduction to canvas technology Canvas is a new element in HTML5, which allows us to use
Where to write canvas code
Dec 20, 2023 pm 03:17 PM
Canvas code can be written inside the <body> tag of an HTML file, usually as part of the HTML document. The core of the Canvas code is to obtain and operate the context of the Canvas element. The reference to the Canvas element is obtained through document.getElementById('myCanvas') , and then use getContext('2d') to get the 2D drawing context.
