html canvas 开发工具,基于js的html canvas工具包:cantool

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

此工具包包含：

1。包括对鼠标坐标，触屏坐标， 将颜色二进制或字符串转为rgb，对二进制颜色的检索， 3d图形绘制，2d图形绘制，

3d节点绘制， 生成飞船，速度向量。

建议中级开发者使用。

若使用请复制(含压缩版):

cantool.js：

/*

@Copyright David Gao(davidg0)

Made In China

canTool Version 1.0

canTool is an engine use to draw 2d and 3d points.Also included shipMaker,Ball3d,slider,mouse position and touch posision(for iPad or phones) and so on.

*/

//Animation requesting part for Opera Navigater Safari Chrome FireFox

if (!window.requestAnimationFrame) {

window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame ||

function (callback) {

return window.setTimeout(callback, 17 );

});

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||

window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||

window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||

window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||

window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||

window.clearTimeout);

}

//Objects part

function Ball3d(radius, color){

this.x = 0;

this.y = 0;

this.xpos = 0;

this.ypos = 0;

this.zpos = 0;

this.vx = 0;

this.vy = 0;

this.vz = 0;

this.radius = radius;

this.mass = 1;

this.rotation = 0;

this.scaleX = 1;

this.scaleY = 1;

this.color = tool.pColor(color);

this.lineWidth = 1;

this.visible = true;

}

Ball3d.prototype.draw = function(context){

context.save();

context.translate(this.x, this.y);

context.rotate(this.rotation);

context.scale(this.scaleX, this.scaleY);

context.lineWidth = this.lineWidth;

context.fillStyle = this.color;

context.beginPath();

context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);

context.closePath();

context.fill();

context.stroke();

context.restore();

};

function shipMaker(width, height){

this.x = 0;

this.y = 0;

this.width = width;

this.height = height;

this.rotation = 0;

}

shipMaker.prototype.draw = function(context){

context.save();

context.translate(this.x, this.y);

context.rotate(this.rotation);

context.lineWidth = 1;

context.strokeStyle = "white";

context.beginPath();

context.moveTo(10, 0);

context.lineTo(-10, 10);

context.lineTo(-5, 0);

context.lineTo(-10, -10);

context.lineTo(10, 0);

context.stroke();

if(this.showFlame){

context.beginPath();

context.moveTo(-7.5, -5);

context.lineTo(-15, 0);

context.lineTo(-7.5, 5);

context.stroke();

}

context.restore();

};

function Segment(width, height, widthL, color){

this.x = 0;

this.y = 0;

this.width = width;

this.height = height;

this.vx = 0;

this.vy = 0;

this.rotation = 0;

this.scaleX = 1;

this.scaleY = 1;

this.lineWidth = widthL

}

Segment.prototype.draw = function(context){

var h = this.height;

var d = this.width + h;

var cr = h / 2;

context.save();

context.translate(this.x, this.y);

context.rotate(this.rotation);

context.scale(this.scaleX, this.scaleY);

context.lineWidth = this.lineWidth;

context.beginPath();

context.moveTo(0, -cr);

context.lineTo(d - h, -cr);

context.quadraticCurveTo(-cr + d, -cr, -cr + d, 0);

context.lineTo(-cr + d, h - 2 * cr);

context.quadraticCurveTo(-cr + d, -cr + h, d - 2 * cr, -cr + h);

context.lineTo(0, -cr + h);

context.quadraticCurveTo(-cr, -cr + h, -cr, h - 2 * cr);

context.lineTo(-cr, 0);

context.quadraticCurveTo(-cr, -cr, 0, -cr);

context.closePath();

context.fill();

if(this.lineWidth > 0){

context.stroke();

}

};

function Slider(min, max, value){

this.onchange = null;

this.x = 0;

this.y = 0;

this.width = 16;

this.height = 100;

this.backWidth = 4;

this.backX = this.width / 2 - this.backWidth / 2;

this.handleHeight = 6;

this.handleY = 0;

this.updatePosition();

}

Slider.prototype.draw = function(context){

context.save();

context.translate(this.x, this.y);

context.beginPath();

context.fillRect(this.backX, 0, this.backWidth, this.height);

context.closePath();

context.beginPath();

context.rect(0, this.handleY, this.width, this.handleHeight);

context.closePath();

context.fill();

context.stroke();

context.restore();

};

Slider.prototype.updateValue = function(){

var old_value = this.value;

var handleRange = this.height - this.handleHeight;

var valueRange = this.max - this,min;

this.value = (handleRange - this.handleY) / handleRange * valueRange + this.min;

if(typepf this.onchange === *function* this.value !== old_value){