Canvas基础入门 - 二 时钟与刮刮卡

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、时钟绘制思路及代码实现

思路与C++（easyX）绘制时钟是一模一样的

1.代码

代码如下（示例）：

	function rendClock(){
    
    
		ctx.clearRect(0,0,800,600); //清空画布
		ctx.save();
		ctx.translate(400,300); //将画布上400，300坐标映射为原点
		ctx.rotate(-Math.PI/2);
		
		//画表盘
		ctx.save();
		ctx.beginPath();
		ctx.arc(0,0,200,0,2*Math.PI);
		ctx.strokeStyle = "darkgray";
		ctx.lineWidth = 10;
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
		
		//添加logo
		ctx.font = "20px 微软雅黑";
		ctx.rotate(Math.PI/2)
		ctx.fillText("casio",-25,-100); //实体
		
		//画圆心
		ctx.save();
		ctx.beginPath();
		ctx.arc(0,0,1,0,2*Math.PI);
		ctx.strokeStyle = "deepskyblue";
		ctx.lineWidth = 10;
		ctx.stroke();
		ctx.closePath();
		ctx.restore();	
		//画秒针刻度
		ctx.save();
		for(var i = 0 ; i < 60 ; i++){
    
    
			ctx.rotate(Math.PI / 30);
			ctx.beginPath();
			ctx.moveTo(180,0);
			ctx.lineTo(190,0);
			ctx.lineWidth = 5;
			ctx.lineCap = "round";
			ctx.strokeStyle = "#02A6B5";
			ctx.stroke();
			ctx.closePath();
		}
		ctx.restore();
		//画时针刻度
		ctx.save();
		for(var i = 0 ; i < 12 ; i++){
    
    
			ctx.rotate(Math.PI / 6);
			ctx.beginPath();
			ctx.moveTo(175,0);
			ctx.lineTo(190,0);
			ctx.lineWidth = 10;
			ctx.lineCap = "round";
			ctx.strokeStyle = "orange";
			ctx.stroke();
			ctx.closePath();
		}
		ctx.restore();
		var time = new Date()
		
		var hour =  time.getHours()
		var min = time.getMinutes()
		var sec = time.getSeconds()
		//如果时间是大于12的话,就直接减去12
		hour = hour>12?hour-12:hour
		console.log(hour+":"+min+":"+sec)
		//画秒针
		ctx.save();
		ctx.rotate(2 * Math.PI / 60 * sec);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(160,0);
		ctx.strokeStyle = "darkgray";
		ctx.lineWidth = 3;
		ctx.lineCap = "round";
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
		
		//画分针
		ctx.save();
		ctx.rotate(2 * Math.PI / 60 * min + 2*Math.PI/3600*sec);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(130,0);
		ctx.strokeStyle = "orangered";
		ctx.lineWidth = 5;
		ctx.lineCap = "round";
		ctx.stroke(); 
		ctx.closePath();
		ctx.restore();
		
		//时针
		ctx.save();
		ctx.rotate(2 * Math.PI / 12 * hour + 2*Math.PI/60/12*min);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(100,0);
		ctx.strokeStyle = "yellowgreen";
		ctx.lineWidth = 8;
		ctx.lineCap = "round";
		ctx.stroke(); 
		ctx.closePath();
		ctx.restore();
		
		ctx.restore();
	}

2.注意事项

我们可以看到save()是用于保存当前图像状态的，而restore();则是用于重置图像。 这有点类似C++的刷新。

原点的映射： ctx.translate(400,300); translate可以重新指定画布中原点的位置。

---

二、刮刮卡绘制思路及代码实现

globalCompositeOperation的属性：

2.代码实现

代码如下（示例）：

<script type="text/javascript">
	var canvas = document.querySelector("#canvas");
	var price = document.querySelector("#price");
	var ggk = document.querySelector("#ggk");
	var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = "darkgray";
	ctx.fillRect(0,0,600,200);
	
	var flag = false;
	ggk.onmousedown = function(){
    
     //鼠标按下时开始画圆
		flag = true;
		console.log(flag);
	}
	
	ggk.onmousemove = function(e){
    
    
		//获取xy轴值
		if(flag == true){
    
    
			var x = e.pageX - ggk.offsetLeft;
			var y = e.pageY - ggk.offsetTop;
			ctx.globalCompositeOperation = "destination-out";
			ctx.arc(x,y,20,0,2*Math.PI);
			ctx.fill();
		}
	}
	
	ggk.onmouseup = function(){
    
    
		flag = false;
	}
	
	var arr = [{
    
    content:"一等奖",p:0.1},{
    
    content:"二等奖",p:0.2},{
    
    content:"三等奖",p:0.3}]
	var randomNum = Math.random()
	if(randomNum<arr[0].p){
    
    
		price.innerHTML = arr[0].content
	}else if(randomNum<arr[1].p+arr[0].p){
    
    
		price.innerHTML = arr[1].content
	}else if(randomNum<arr[2].p+arr[1].p+arr[0].p){
    
    
		price.innerHTML = arr[2].content
	}
	
</script>

首先需要用一个<canvas>覆盖一个<div>元素，然后对在div中写入获奖情况，fillRect()方法对元素进行颜色覆盖，最后通过鼠标事件即可完成刮刮卡的制作