canvas小试牛刀
作者：互联网
时钟
canvas绘制时钟
<canvas id="canvas" width="600" height="600"></canvas>
<script>
var canvasId=document.getElementById("canvas");
var ctx=canvasId.getContext("2d");
setInterval(()=>{
ctx.save()
ctx.clearRect(0, 0, 600, 600)
ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0
ctx.save()
//大
ctx.beginPath();
ctx.arc(0,0,100,0,2 * Math.PI);
ctx.stroke();
ctx.closePath();
//小
ctx.beginPath();
ctx.arc(0,0,5,0,2 * Math.PI);
ctx.stroke();
ctx.closePath();
//当前时间
var time = new Date();
let hour = time.getHours() % 12;
let min = time.getMinutes();
let sec = time.getSeconds();
console.log("ss",hour,min,sec);
//时钟
ctx.rotate(2 * Math.PI /12 *hour + 2*Math.PI/12 *(min/60) -Math.PI /2);
ctx.beginPath()
//moveTo设置画线起点
ctx.moveTo(-10,0)
//lineTo设置画线经过点
ctx.lineTo(54,0);
ctx.lineWidth=6;
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.closePath()
// 恢复成上一次save的状态
ctx.restore()
// 恢复完再保存一次
ctx.save()
//分钟
ctx.rotate(2* Math.PI/60 * min + 2* Math.PI/60 *(sec/60) - Math.PI/2);
ctx.beginPath();
ctx.moveTo(-10, 0);
ctx.lineTo(90, 0);
ctx.lineWidth=3;
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
//秒针
ctx.rotate(2 * Math.PI / 60 * sec - Math.PI / 2)
ctx.beginPath()
ctx.moveTo(-10, 0)
ctx.lineTo(80, 0)
ctx.strokeStyle = '#666'
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()
// 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的
ctx.lineWidth = 1
for (let i = 0; i < 60; i++) {
ctx.rotate(2 * Math.PI / 60)
ctx.beginPath()
ctx.moveTo(90, 0)
ctx.lineTo(100, 0)
// ctx.strokeStyle = 'red'
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.save()
ctx.lineWidth = 5
for (let i = 0; i < 12; i++) {
ctx.rotate(2 * Math.PI / 12)
ctx.beginPath()
ctx.moveTo(85, 0)
ctx.lineTo(100, 0)
ctx.stroke()
ctx.closePath()
}
ctx.restore()
ctx.restore()
},1000)
</script>
2刮刮卡
html
<div class="html5">
<div class="warp">
<div class="inner-warp">
<canvas id="canvas" class="canvas"></canvas>
<div class="rs mentos abs"></div>
<div class="rs empty abs"></div>
</div>
</div>
</div>
css
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.html5{
width: 320px;
height: 188px;
background: url(http://img.aimoge.com/Fnna0oYkHLIJqoqJ5L10aJwS7-99) 0 0 no-repeat;
background-size: 100% auto;
margin:0 auto;
position: relative;
}
.abs {
position: absolute;
}
.warp{
position: relative;
width: 260px;
height: 120px;
top: 31px;
left: 30px;
padding:6px 10px;
box-sizing: border-box;
background-color: #fff;
}
.inner-warp{
width:100%;
height:100%;
position: relative;
}
.canvas {
position:absolute;
top: 0px;
left: 0px;
z-index: 350;
}
.html5 .rs {
position: absolute;
width: 240px;
height: 108px;
top: 0px;
left: 0px;
display: none;
background-size: 100% auto;
background-repeat: no-repeat;
z-index: 300;
}
.html5 .rs.mentos {
background-image:刮刮卡下面的图片;
}
<script>
var img = new Image();
img.crossOrigin = '';
img.src = 'http://img.aimoge.com/FluRH5rP3ur-Se2XTKatZaLZvdTD';
function initCanvasResult(){
document.querySelector(".mentos").style.display="block";
}
//计算偏移量
function getPoint(obj){
let t = obj.offsetTop;
let l = obj.offsetLeft;
while(obj = obj.offsetParent){
t += obj.offsetTop;
l += obj.offsetLeft;
}
return{
offsetTop:t,
offsetLeft:l
}
}
function getTransparentPercent(ctx,width,height){
console.log("ss",ctx,width,height)
var imgData = ctx.getImageData(0, 0, width, height),
pixles = imgData.data,
transPixs = [];
console.log("sssss",imgData,pixles,transPixs)
for (var i = 0, j = pixles.length; i < j; i += 4) {
var a = pixles[i + 3];
if (a < 128) {
transPixs.push(i);
}
}
return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
}
img.onload =function(){
const canvas = document.querySelector('#canvas');
let canvasOffset = getPoint(canvas);
let ctx = canvas.getContext('2d');
let width=240,height=108,precent=0;
canvas.width = width;
canvas.height = height;
//偏移量
let offsetX = canvasOffset.offsetLeft, offsetY = canvasOffset.offsetTop;
ctx.drawImage(img, 0, 0, width, height);
//显示挂挂卡下面的底图
initCanvasResult();
var mousedown = false;
canvas.addEventListener('touchstart',function(e){
mousedown = true;
ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 40;
ctx.lineCap = "round";
ctx.lineJoin = "round";
})
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
let touches = e.changedTouches[0];
if(!mousedown){
return;
}
if(touches){
var x = touches.clientX - offsetX,
y = touches.clientY - offsetY;
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();
}
})
canvas.addEventListener('touchend',function(e){
mousedown=false;
precent = getTransparentPercent(ctx,width,height);
if (precent > 50 && precent != 100) {
ctx.clearRect(0, 0, width, height);
alert('恭喜，获得礼品一份！！！');
}
})
}
</script>
参考地址：https://juejin.cn/post/6986785259966857247
标签：canvas,ctx,height,width,PI,小试牛刀,Math 来源： https://www.cnblogs.com/zhihou/p/15064867.html