画布
标签:<canvas>,用于绘制图像(通过脚本,通常是 JavaScript)。
例子:抽奖轮盘
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#cans{
background-color: gray;
}
</style>
<script>
window.onload = function (){
var cans = document.getElementById("cans");
var pen = cans.getContext("2d");
var arrColor = ["#7ACC5D", "#B5CC3E", "#CC9ABE", "#4E9ACC", "#CC4D56", "#AF1ECC", "#6C44CC", "#CC8939"];
var arrText = ["0元","0.5元","1元","5元","10元","20元","50元","100元"];
pen.translate(250,250);
var flag = 0;
var po = 50 + parseInt(Math.random()*30);
var run = window.setInterval(function(){
if (po <= 0.2){
window.clearInterval(run);
pen.beginPath();
pen.textAlign = "center";
pen.textBaseline = "middle";
pen.font = "20px 微软雅黑";
pen.fillText(arrText[arrText.length - Math.ceil(flag/45)],0,0);
}else{
if (flag >= 360){
flag = 0;
}
po *= 0.95;
flag += po;
pen.clearRect(-250,-250,500,500);
pen.save();
pen.beginPath();
pen.lineWidth = 3;
pen.moveTo(170,0);
pen.lineTo(200,0);
pen.stroke();
pen.rotate(flag*Math.PI/180);
//转盘
(function(){
for (var i = 1;i <= 8 ;i++){
pen.beginPath();
pen.moveTo(0,0);
pen.lineWidth = 3;
pen.fillStyle = arrColor[i-1];
pen.arc(0,0,150,Math.PI*2/360*45*[i-1],Math.PI*2/360*45*i,false);
pen.closePath();
pen.stroke();
pen.fill();
}
}());
//中心圆
pen.beginPath();
pen.fillStyle = "white";
pen.arc(0,0,50,0,Math.PI*2);
pen.stroke();
pen.fill();
//文字
(function(){
for (var i = 0;i < arrText.length;i++){
pen.beginPath();
pen.save();
pen.font = "16px 微软雅黑";
pen.rotate((i*45+28)*Math.PI/180);
pen.fillText(arrText[i],70,0);
pen.restore();
}
}());
pen.restore()
}
},50)
}
</script>
</head>
<body>
<canvas id="cans" width="500" height="500"></canvas>
</body>
</html>
例子:时钟
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var vas = document.getElementById("vas");
var pen = vas.getContext("2d");
window.setInterval(function(){
//外圆
pen.clearRect(0,0,500,500);
pen.beginPath();
pen.strokeStyle = "black";
pen.lineWidth = 2;
pen.fillStyle = "white";
var originX = 250;
var originY = 250;
var radius = 120;
pen.arc(originX,originY,radius,0,Math.PI*2);
pen.stroke();
pen.fill();
var time = new Date();
var hour = time.getHours()*30 + time.getMinutes()/2 - 90;
var min = time.getMinutes()*6 - 90;
var sec = time.getSeconds()*6 - 90;
//刻度
(function (){
pen.shadowColor = "transparent";
for (var i = 1; i <= 60;i++){
pen.beginPath();
var ang = i*6;
var wid = 2;
var rad = radius - 6;
if (i % 5 == 0 ){
rad = radius - 10;
wid = 3;
}
pen.lineWidth = wid;
pen.moveTo(Math.cos(ang*Math.PI*2/360)*radius + originX,Math.sin(ang*Math.PI*2/360)*radius + originY);
pen.lineTo(Math.cos(ang*Math.PI*2/360)*rad + originX,Math.sin(ang*Math.PI*2/360)*rad + originY);
pen.stroke()
}
})();
point(originX,originY,56,"red",4,hour,pen);
point(originX,originY,76,"blue",3,min,pen);
point(originX,originY,96,"yellow",2,sec,pen);
//中心
pen.beginPath();
pen.fillStyle = "black";
pen.arc(originX,originY,5,0,Math.PI*2);
pen.stroke();
pen.fill();
},1000);
//指针
function point(originX,originY,r,color,width,ang,pen){
pen.beginPath();
ang = ang*Math.PI*2/360;
pen.lineWidth = width;
pen.shadowColor = "black";
pen.shadowOffsetX = 3;
pen.shadowOffsetY = 3;
pen.strokeStyle = color;
pen.moveTo(originX,originY);
pen.lineTo(Math.cos(ang)*r + originX,Math.sin(ang)*r + originY);
pen.stroke();
}
}
</script>
</head>
<body>
<canvas id = "vas" width=500 height=500 style="background-color: antiquewhite"></canvas>
</body>
</html>