canvas画多圈数据和点击下载事件
2017-11-29 14:12
239 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{
position:relative;
margin:0 auto;
}
</style>
<script>
/* requestAnimationFrame.js
* by zhangxinxu 2013-09-30
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','ms','o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
</script>
</head>
<body>
<div id="canvas" style="width:500px;height:500px;"></div>
</body>
</html>
<script>
var jquery = (function(){
var $ = function(id){
return document.getElementById(id) || id;
};
return $;
}());
var test = (function($){
var extend = function(target,source){
for(var key in source){
if(key in target){
target[key] = source[key];
}
}
return target;
}
var getPosition = function(ev){ //获取当前鼠标的坐标
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
/**
* 获取mimeType
* @param {String} type the old mime-type
* @return the new mime-type
*/
var _fixType = function(type) { //获取图片的mime类型
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
/**
* 在本地进行文件保存
* @param {String} data 要保存到本地的图片base64数据
* @param {String} filename 文件名
*/
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
var addEvent = function(obj,event,func){
//addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。
obj.addEventListener ? obj.addEventListener(event,func,false) : obj.attachEvent("on"+event,function(){func.call(obj);});
}
var init = function(opt){
this.option = {
element : null,
}
extend(this.option,opt);
this.initialize();
}
init.prototype = {
initialize : function(){
this.canvas = this.createcanvas();
this.ctx = this.canvas.getContext("2d");
this.reset();
this.render(); //渲染
},
render : function(){
this.ctx.save();
this.ctx.fillStyle = "#273341";
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
this.ctx.restore(); //绘制背景
this.drawCircle(0,360,this.rotate1,"#323d4b"); //外彩色扇形背景圆
this.drawCircle(0,30,this.rotate1,"#4c17e2"); //外彩色扇形圆
this.drawCircle(45,55,this.rotate1,"#1777e2"); //外彩色扇形圆
this.drawCircle(90,110,this.rotate1,"#17cde2"); //外彩色扇形圆
this.drawCircle(135,146,this.rotate1,"#3fc371"); //外彩色扇形圆
this.drawCircle(180,198,this.rotate1,"#ffbc3a"); //外彩色扇形圆
this.drawCircle(225,231,this.rotate1,"#e27217"); //外彩色扇形圆
this.drawCircle(270,290,this.rotate1,"#e217a1"); //外彩色扇形圆
this.drawCircle(315,335,this.rotate1,"#b017e2"); //外彩色扇形圆
this.drawCircle(0,360,this.rotate1-(this.canvas.width/15),"#273341"); //内覆盖扇形背景圆
this.drawCircle(0,45,this.rotate2,"#4c17e2"); //内彩色扇形圆
this.drawCircle(45,90,this.rotate2,"#1777e2"); //内彩色扇形圆
this.drawCircle(90,135,this.rotate2,"#17cde2"); //内彩色扇形圆
this.drawCircle(135,180,this.rotate2,"#3fc371"); //内彩色扇形圆
this.drawCircle(180,225,this.rotate2,"#ffbc3a"); //内彩色扇形圆
this.drawCircle(225,270,this.rotate2,"#e27217"); //内彩色扇形圆
this.drawCircle(270,315,this.rotate2,"#e217a1"); //内彩色扇形圆
this.drawCircle(315,360,this.rotate2,"#b017e2"); //内彩色扇形圆
this.drawCircle(0,360,this.rotate1-(this.canvas.width/6),"#273341"); //内覆盖扇形背景圆
this.drawLine(0,this.canvas.width/2,this.canvas.width,this.canvas.width/2); //交叉背景线
this.drawLine(this.canvas.width/2,0,this.canvas.width/2,this.canvas.width); //交叉背景线
this.drawLine(0,0,this.canvas.width,this.canvas.width); //交叉背景线
this.drawLine(this.canvas.width,0,0,this.canvas.width); //交叉背景线
// this.drawCircle(0,45,this.rotate2,"#4c17e2");
this.drawText("注册",18,28,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录中",53,83,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录人员",97,127,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录",152,162,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("操作",197,207,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("管理员",238,258,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("后台管理",277,308,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("运营数据
e55b
",322,353,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("60.5%",24,38,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("17.8%",70,83,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 6",100,128,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 4.2.3",163,173,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 1570",208,218,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 21.6",253,263,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("17.1%",294,308,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("55.5%",339,353,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.addEventDownload(); //添加下载事件
},
addEventDownload : function(){
var _this = this;
_this.drawDownloadText(); //绘制下载字样
addEvent(this.canvas,"mousemove",function(e){ //给矩形添加鼠标移动事件
var target = getPosition(e); //获取鼠标点击的坐标
// console.log(target);
if(_this.ctx.isPointInPath(target.x,target.y)){ //如果在矩形里面
_this.canvas.style.cursor = "pointer"; //将鼠标变成 手指形状
}else{
_this.canvas.style.cursor = "default";
}
})
addEvent(this.canvas,"click",function(e){ //给矩形添加点击事件
var target = getPosition(e); //获取鼠标点击的坐标
// console.log(target);
if(_this.ctx.isPointInPath(target.x,target.y)){ //如果在矩形里面
//把下载的字样隐藏
_this.ctx.save();
_this.ctx.fillStyle = "#273341";
_this.ctx.rect(_this.canvas.width-135,0,125,25);
_this.ctx.fill();
_this.ctx.restore();
// 图片导出为 png 格式
var type = 'png';
var imgData = _this.canvas.toDataURL(type); //获取canvas的图片base64数据
_this.drawDownloadText(); //重新绘制下载字样
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);
}
});
},
drawDownloadText : function(){
this.ctx.save();
this.ctx.fillStyle = "white";
this.ctx.font = "20px 微软雅黑";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.translate(this.canvas.width-75,12);
this.ctx.fillText("点击这里下载",0,0);
this.ctx.restore(); //创建下载字样
this.ctx.save();
// this.ctx.fillStyle = "black";
this.ctx.rect(this.canvas.width-135,0,125,25); //创建一个矩形覆盖在文字上，因为事件只能获取矩形的坐标
// this.ctx.fill();
this.ctx.restore();
},
drawText : function(a,b,c,d,radius){ //参数: 输出的字符串 , 开始角度 , 结束角度 , textAlign
var angleMinus = (b*Math.PI/180-c*Math.PI/180)/(a.length-1),
angle = parseFloat(b*Math.PI/180),
index = 0,
character;
while(index < a.length){
this.ctx.save();
this.ctx.fillStyle = "white";
this.ctx.font = "20px 微软雅黑";
this.ctx.textAlign = d;
this.ctx.textBaseline = "middle";
character = a.charAt(index);
this.ctx.beginPath();
this.ctx.translate(
this.smcircle.x+Math.cos(angle)*radius,
this.smcircle.y+Math.sin(angle)*radius,
); //平移
this.ctx.rotate(Math.PI/2 + angle); //旋转
this.ctx.fillText(character,0,0);
angle -= angleMinus;
index++;
this.ctx.closePath();
this.ctx.restore();
}
},
drawLine : function(a,b,c,d){ //参数: 起始坐标x , 起始坐标y , 结束坐标 x, 结束坐标 y
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(a,b); //起始坐标
this.ctx.lineTo(c,d); //终点坐标
this.ctx.strokeStyle = "#273341";
this.ctx.closePath();
this.ctx.lineWidth = 10; //线条粗细
this.ctx.stroke();
this.ctx.restore();
},
drawCircle : function(a,b,r,color){ //参数: 起始度数,结束度数,半径,颜色
this.ctx.save();
this.ctx.beginPath();
this.ctx.fillStyle = color;
this.ctx.moveTo(this.circle.x,this.circle.y);
this.ctx.arc(this.circle.x,this.circle.y,r,a*Math.PI/180,b*Math.PI/180,false);
this.ctx.closePath();
// this.ctx.stroke(); //stroke是线条颜色 ，
this.ctx.fill(); //fill是填充颜色 ，
this.ctx.restore();
},
reset : function(){
this.rotate1 = this.canvas.width/2;
this.rotate2 = this.rotate1-(this.canvas.width/10);
this.circle = {
x:this.canvas.width/2,
y:this.canvas.height/2,
radius:Math.sqrt(Math.pow(this.canvas.width,2)+Math.pow(this.canvas.height,2))/2
};
this.smcircle = {
x:this.circle.x,
y:this.circle.y,
radius:this.rotate1-(this.canvas.width/7.5)
};
},
createcanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "您的浏览器不支持canvas,赶紧换一个吧！";
$(this.option.element).appendChild(canvas);
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
return canvas;
}
}
return init; //暴露一个方法给调用
}(jquery || {}));
window.onload = function(){
var option = {
element : "canvas"
}
new test(option); //初始化test类
}
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{
position:relative;
margin:0 auto;
}
</style>
<script>
/* requestAnimationFrame.js
* by zhangxinxu 2013-09-30
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','ms','o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
</script>
</head>
<body>
<div id="canvas" style="width:500px;height:500px;"></div>
</body>
</html>
<script>
var jquery = (function(){
var $ = function(id){
return document.getElementById(id) || id;
};
return $;
}());
var test = (function($){
var extend = function(target,source){
for(var key in source){
if(key in target){
target[key] = source[key];
}
}
return target;
}
var getPosition = function(ev){ //获取当前鼠标的坐标
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
/**
* 获取mimeType
* @param {String} type the old mime-type
* @return the new mime-type
*/
var _fixType = function(type) { //获取图片的mime类型
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
/**
* 在本地进行文件保存
* @param {String} data 要保存到本地的图片base64数据
* @param {String} filename 文件名
*/
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
var addEvent = function(obj,event,func){
//addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。
obj.addEventListener ? obj.addEventListener(event,func,false) : obj.attachEvent("on"+event,function(){func.call(obj);});
}
var init = function(opt){
this.option = {
element : null,
}
extend(this.option,opt);
this.initialize();
}
init.prototype = {
initialize : function(){
this.canvas = this.createcanvas();
this.ctx = this.canvas.getContext("2d");
this.reset();
this.render(); //渲染
},
render : function(){
this.ctx.save();
this.ctx.fillStyle = "#273341";
this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
this.ctx.restore(); //绘制背景
this.drawCircle(0,360,this.rotate1,"#323d4b"); //外彩色扇形背景圆
this.drawCircle(0,30,this.rotate1,"#4c17e2"); //外彩色扇形圆
this.drawCircle(45,55,this.rotate1,"#1777e2"); //外彩色扇形圆
this.drawCircle(90,110,this.rotate1,"#17cde2"); //外彩色扇形圆
this.drawCircle(135,146,this.rotate1,"#3fc371"); //外彩色扇形圆
this.drawCircle(180,198,this.rotate1,"#ffbc3a"); //外彩色扇形圆
this.drawCircle(225,231,this.rotate1,"#e27217"); //外彩色扇形圆
this.drawCircle(270,290,this.rotate1,"#e217a1"); //外彩色扇形圆
this.drawCircle(315,335,this.rotate1,"#b017e2"); //外彩色扇形圆
this.drawCircle(0,360,this.rotate1-(this.canvas.width/15),"#273341"); //内覆盖扇形背景圆
this.drawCircle(0,45,this.rotate2,"#4c17e2"); //内彩色扇形圆
this.drawCircle(45,90,this.rotate2,"#1777e2"); //内彩色扇形圆
this.drawCircle(90,135,this.rotate2,"#17cde2"); //内彩色扇形圆
this.drawCircle(135,180,this.rotate2,"#3fc371"); //内彩色扇形圆
this.drawCircle(180,225,this.rotate2,"#ffbc3a"); //内彩色扇形圆
this.drawCircle(225,270,this.rotate2,"#e27217"); //内彩色扇形圆
this.drawCircle(270,315,this.rotate2,"#e217a1"); //内彩色扇形圆
this.drawCircle(315,360,this.rotate2,"#b017e2"); //内彩色扇形圆
this.drawCircle(0,360,this.rotate1-(this.canvas.width/6),"#273341"); //内覆盖扇形背景圆
this.drawLine(0,this.canvas.width/2,this.canvas.width,this.canvas.width/2); //交叉背景线
this.drawLine(this.canvas.width/2,0,this.canvas.width/2,this.canvas.width); //交叉背景线
this.drawLine(0,0,this.canvas.width,this.canvas.width); //交叉背景线
this.drawLine(this.canvas.width,0,0,this.canvas.width); //交叉背景线
// this.drawCircle(0,45,this.rotate2,"#4c17e2");
this.drawText("注册",18,28,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录中",53,83,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录人员",97,127,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("登录",152,162,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("操作",197,207,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("管理员",238,258,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("后台管理",277,308,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("运营数据
e55b
",322,353,"center",this.smcircle.radius); //内圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("60.5%",24,38,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("17.8%",70,83,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 6",100,128,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 4.2.3",163,173,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 1570",208,218,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText(" 21.6",253,263,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("17.1%",294,308,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.drawText("55.5%",339,353,"center",this.circle.radius-(this.canvas.width/4.2)); //外圆的文字，开始角度，结束角度，水平对齐，半径
this.addEventDownload(); //添加下载事件
},
addEventDownload : function(){
var _this = this;
_this.drawDownloadText(); //绘制下载字样
addEvent(this.canvas,"mousemove",function(e){ //给矩形添加鼠标移动事件
var target = getPosition(e); //获取鼠标点击的坐标
// console.log(target);
if(_this.ctx.isPointInPath(target.x,target.y)){ //如果在矩形里面
_this.canvas.style.cursor = "pointer"; //将鼠标变成 手指形状
}else{
_this.canvas.style.cursor = "default";
}
})
addEvent(this.canvas,"click",function(e){ //给矩形添加点击事件
var target = getPosition(e); //获取鼠标点击的坐标
// console.log(target);
if(_this.ctx.isPointInPath(target.x,target.y)){ //如果在矩形里面
//把下载的字样隐藏
_this.ctx.save();
_this.ctx.fillStyle = "#273341";
_this.ctx.rect(_this.canvas.width-135,0,125,25);
_this.ctx.fill();
_this.ctx.restore();
// 图片导出为 png 格式
var type = 'png';
var imgData = _this.canvas.toDataURL(type); //获取canvas的图片base64数据
_this.drawDownloadText(); //重新绘制下载字样
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type),'image/octet-stream');
// 下载后的问题名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData,filename);
}
});
},
drawDownloadText : function(){
this.ctx.save();
this.ctx.fillStyle = "white";
this.ctx.font = "20px 微软雅黑";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.translate(this.canvas.width-75,12);
this.ctx.fillText("点击这里下载",0,0);
this.ctx.restore(); //创建下载字样
this.ctx.save();
// this.ctx.fillStyle = "black";
this.ctx.rect(this.canvas.width-135,0,125,25); //创建一个矩形覆盖在文字上，因为事件只能获取矩形的坐标
// this.ctx.fill();
this.ctx.restore();
},
drawText : function(a,b,c,d,radius){ //参数: 输出的字符串 , 开始角度 , 结束角度 , textAlign
var angleMinus = (b*Math.PI/180-c*Math.PI/180)/(a.length-1),
angle = parseFloat(b*Math.PI/180),
index = 0,
character;
while(index < a.length){
this.ctx.save();
this.ctx.fillStyle = "white";
this.ctx.font = "20px 微软雅黑";
this.ctx.textAlign = d;
this.ctx.textBaseline = "middle";
character = a.charAt(index);
this.ctx.beginPath();
this.ctx.translate(
this.smcircle.x+Math.cos(angle)*radius,
this.smcircle.y+Math.sin(angle)*radius,
); //平移
this.ctx.rotate(Math.PI/2 + angle); //旋转
this.ctx.fillText(character,0,0);
angle -= angleMinus;
index++;
this.ctx.closePath();
this.ctx.restore();
}
},
drawLine : function(a,b,c,d){ //参数: 起始坐标x , 起始坐标y , 结束坐标 x, 结束坐标 y
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(a,b); //起始坐标
this.ctx.lineTo(c,d); //终点坐标
this.ctx.strokeStyle = "#273341";
this.ctx.closePath();
this.ctx.lineWidth = 10; //线条粗细
this.ctx.stroke();
this.ctx.restore();
},
drawCircle : function(a,b,r,color){ //参数: 起始度数,结束度数,半径,颜色
this.ctx.save();
this.ctx.beginPath();
this.ctx.fillStyle = color;
this.ctx.moveTo(this.circle.x,this.circle.y);
this.ctx.arc(this.circle.x,this.circle.y,r,a*Math.PI/180,b*Math.PI/180,false);
this.ctx.closePath();
// this.ctx.stroke(); //stroke是线条颜色 ，
this.ctx.fill(); //fill是填充颜色 ，
this.ctx.restore();
},
reset : function(){
this.rotate1 = this.canvas.width/2;
this.rotate2 = this.rotate1-(this.canvas.width/10);
this.circle = {
x:this.canvas.width/2,
y:this.canvas.height/2,
radius:Math.sqrt(Math.pow(this.canvas.width,2)+Math.pow(this.canvas.height,2))/2
};
this.smcircle = {
x:this.circle.x,
y:this.circle.y,
radius:this.rotate1-(this.canvas.width/7.5)
};
},
createcanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "您的浏览器不支持canvas,赶紧换一个吧！";
$(this.option.element).appendChild(canvas);
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
return canvas;
}
}
return init; //暴露一个方法给调用
}(jquery || {}));
window.onload = function(){
var option = {
element : "canvas"
}
new test(option); //初始化test类
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- listview请求数据源，会加载很多数据，需求就是在listview下面有一个button点击事件，当数据完成一个下面紧接着跟着button点击事件，进行点击跳转
- 点击预测-超过1TB可下载的数据集
- 关于Ext.grid.CheckboxSelectionModel点击事件时无法获得当前选择列的数据值
- 如何在点击特定数据时，不触发输入框失去焦点事件
- 激发按钮点击事件为listview中添加数据
- 一个不错的HTML5 Canvas多层点击事件监听实例
- gridview中button添加事件以及获取点击button那行的索引和数据
- 通过点击datagrid的某一行的checkbox事件获取该行的其他数据（例如：行号）
- canvas 修改光标形状 滑过事件 点击事件
- 完成用户数据的导出，生成文本文件Users.txt,实现点击按钮自动下载
- RecyclerView 模拟数据+长按点击事件+刷新加载
- 一个不错的HTML5 Canvas多层点击事件监听实例
- bootstarpTable点击行事件，点击数据事件，layer实现的包含页面的弹出层
- RecyclerView使用，RecyclerView使用，增加一个item，删除一个item，更新数据，item点击事件
- RecyclerView展示固定数据、上拉加载更多、下拉刷新、点击事件、长按点击事件、删除条目、刷新条目、添加条目、多条目加载
- 如何处理：下载文件的按钮在事件未完成之前防止多次点击，事件完成之后又能继续点击提交
- d3中为每个rect元素绑定带数据的点击事件
- 对TextView中的部分数据进行做点击触发事件
- asp.net中GridView内部点击事件判断是第几行并获取row数据
- ListView的数据绑定与点击事件读取信息