前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、时钟绘制思路及代码实现
思路与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()
方法对元素进行颜色覆盖,最后通过鼠标事件即可完成刮刮卡的制作