1 绘制扇形图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 600px;
margin:30px auto;
border:1px solid orange;
}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
var data = [
{
value:0.6,
color:"lightcoral",
text:"记者"
},{
value:0.1,
color:"lightblue",
text:"naive"
},{
value:0.1,
color:"lightgreen",
text:"simple"
},{
value:0.2,
color:"darkgray",
text:"跑得快"
}
];
//先画一个扇形
//圆心就是300 300
//半径就是200
//start = 0 ,end = Math.PI*2*0.2
//我们的文字放置位置
//x=300+200*Math.cos(0.1*Math.PI*2)
//y=300+200*Math.sin(0.1*Math.PI*2)
// ctx.textAlign ="left";
// ctx.textBaseLine = "top";
var start=0;
var end = 0;
var text = 0;
var r = 200;
for(var i=0;i<data.length;i++){
ctx.beginPath();
ctx.moveTo(300,300);
end = start+data[i].value*2*Math.PI;
ctx.arc(300,300,r,start,end);
ctx.closePath();
ctx.fillStyle=data[i].color;
ctx.fill();
ctx.stroke();
// ctx.font="16px 微软雅黑";
text = start + data[i].value/2*2*Math.PI;
var x = 300+r*Math.cos(text);
var y = 300+r*Math.sin(text);
if(x>300){
ctx.textAlign="start";
// x=x+10;
}else{
ctx.textAlign="end";
// x=x-10;
}
if(y>300){
ctx.textBaseLine = "top";
y=y+10;
}else{
ctx.textBaseLine = "bottom";
// y=y-10
}
ctx.fillText(data[i].text,x,y);
start = end;
}
</script>
</body>
</html>
2 小光点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制彩色光点</title>
</head>
<body>
<canvas id="canvas">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");//获得画布
var ctx = canvas.getContext("2d");//得到canvas的上下文对象（获得画布控制权）
canvas.width = 500;
canvas.height= 500;
canvas.style.background = "white";
canvas.style.border = "1px solid darkgray";
canvas.style.position="relative";
canvas.style.left="400px";
canvas.onmousedown=function(e){
var x = e.clientX;
var y = e.clientY+this.offsetTop;
canvas.onmousemove=function(e){
var moveX = e.clientX;
var moveY = e.clientY+this.offsetTop;
ctx.beginPath();
ctx.arc(x-this.offsetLeft,y,moveX-x,2*Math.PI,false);
ctx.closePath();
var color = "rgba("+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+",1)";
ctx.fillStyle = color;
ctx.fill();
}
canvas.onmouseup=function(){
canvas.onmousemove =null;
}
}
</script>
</body>
</html>
3 刮奖功能
刮出一个谢字就可以，何必要把谢谢惠顾四个字都刮出来才肯放手呢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>擦除效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
margin:50px auto;
/*border:1px solid #ccc;*/
background-image: url(img/starks.jpg);
}
</style>
</head>
<body>
<div>
<canvas id="canvas">
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height= 500;
ctx.fillRect(0, 0, 500, 500)
//擦除功能：手动（通过鼠标拖放）绘制一个矩形，绘制出的矩形里面的内容被清除
canvas.onmousedown=function(e){
var e = e ||window.event;
// console.log(e);
if(e.button==0){
var startX = e.clientX - canvas.offsetLeft;
var startY = e.clientY - canvas.offsetTop;
// console.log(canvas.offsetTop)
canvas.onmousemove=function(e){
var e = e ||window.event;
var endX = e.clientX - canvas.offsetLeft;
var endY = e.clientY - canvas.offsetTop;
var width = endX- startX;
var height = endY - startY ;
ctx.clearRect(startX,startY,width,height);
}
canvas.onmouseup=function(){
if(e.button==0){
canvas.onmousemove=null;
}
}
}
}
</script>
</body>
</html>
时间： 2024-10-21 03:32:47