canvas 当点击按钮时,改变圆的填充颜色,求大神指点
方便起见用了jquery，将引入jq的标签换成你用的jq版本就好。该代码支持双色交替变换就这样吧
。
原理就是点击后清空画布，重新绘制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
height:40px;
width:80px;
background: #888;
color:#fff;
text-align: center;
line-height:40px;
margin:20px auto;
}
</style>
</head>
<body>
<canvas id='canvas' height=300 width=400 style='height:300px ;width:400px;border:1px solid #000'></canvas>
<button class='btn'>click</button>
<script src='jquery-1.11.1.min.js'></script>// 此处为jq引用处
<script>
var main=function(ctx,color1,color2,x,y,r){
this.ctx=ctx;
this.color1=color1;
this.color2=color2;
this.x=x;
this.y=y;
this.r=r;
this.draw(this.color1);
this.btn();
}
main.prototype={
draw:function(color){
var color=color;
ctx.beginPath();
ctx.clearRect(0,0,300,400);
ctx.fillStyle=color;
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
ctx.fill();
ctx.closePath();
},
btn:function(){
var that=this
var n=0;
$('.btn').click(function(){
n++;//双色交换逻辑处
if(n%2==0){
that.draw(that.color1);
}else{
that.draw(that.color2);
}
})
}
}
var color1='red';//颜色声明
var color2='blue';
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var main=new main(ctx,color1,color2,50,50,20)// 上下文对象， 初始颜色， 点击变换颜色 ， 创建圆的位置
</script>
</html>
东莞大凡
2024-08-07 广告
