Canvas基础入门 - 二 时钟与刮刮卡
文章目录
- 前言
- 一、时钟绘制思路及代码实现
- 1.代码
- 2.注意事项
- 二、刮刮卡绘制思路及代码实现
- 2.代码实现
前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、时钟绘制思路及代码实现
思路与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();//添加logoctx.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的话,就直接减去12hour = hour>12?hour-12:hourconsole.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()
方法对元素进行颜色覆盖,最后通过鼠标事件即可完成刮刮卡的制作
Canvas基础入门 - 二 时钟与刮刮卡相关推荐
- Vue基础入门(二)
Vue基础入门目录 一.过滤器vue3已经删除!!!!!! 1.什么是过滤器(Filters) 2.代码展示 3.私有过滤器和全局过滤器 4.过滤器的注意点 5.优化时间代码示例 二.watch 侦听 ...
- H5 canvas基础入门到捕鱼达人小游戏实现(1)
为什么学习canvas? 看见别人网页一些非常炫酷的效果,羡慕不已,于是对canvas产生了浓厚的兴趣,所以想仔细学习学习canvas.下面就一起来学习吧,本文为系列文章,最后会编写一个简单版的捕鱼达 ...
- 科协arduino二:基础入门二
一:电路基础: 1,电流:电子在导体中流动,形成电流.电流的计量单位是 安培(A), 1 A = 1000 mA (毫安) 2,电压:指电路两端的电势差或电位差.这个电位差引发电子的流动,产生电 ...
- H5 canvas基础入门到捕鱼达人小游戏实现(3)-canvas运动入门,渐变,文字渲染,阴影
上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续. 本节主要内容 - canvas画板制作 - 块的直线运动 - 粒子运动 - ...
- [转载] python基础入门二
参考链接: Python集合Set 写代码,有如下变量,请按照要求实现每个功能 (共6分,每小题各0.5分) name = " aleX" 1)移除 name 变量对应的值两边 ...
- 002_HTML基础入门二【列表 + 表格】
文章目录 一.列表 List 1.有序列表 ol.li 2.无序列表 ul.li 3.定义列表 dl.dt.dd 二.表格 Table 1.基本标签 2.合并单元格 3.thead.tbody.tfo ...
- 黑马程序员C++基础入门(二)——程序流程结构 - 数组
本文转载自:https://github.com/AnkerLeng/Cpp-0-1-Resource.git 视频见:https://www.bilibili.com/video/av4155972 ...
- Arduino基础入门二之呼吸灯
引言: 之前用UNO R3的数字引脚输出高/低电平实现了LED的亮/灭,而呼吸灯则是让LED明亮度有一个缓慢变化过程,不是直接的亮灭.如何实现?关键就是数字引脚输出的不再是单纯的高低电平,而是PWM信 ...
- Nginx基础入门(二)
八.Nginx WEB模块 1.1 stub_status_moudule 目的 :展示用户和nginx链接数量信息. #查询模块是否安装 [root@xuleilinux ~]# nginx -V ...
最新文章
- JS一起学02:函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
- Smartform中负号提前解决方法
- LeetCode 32 最长有效括号
- 文本字符串中提取数据进行分析
- UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)
- 杭州电子科技大学计算机专硕表数二,杭州电子科技大学 计算机学院 2016级计算机技术(专硕)培养方案...
- java定义说话方法_类定义的基本形式_Java语言程
- 将txt文件转换成xlsx文件及用matlab读取xlsx
- Struts2错误之:Could not find action or result
- huffman树_Java使用哈夫曼树实现文件压缩的原理及实现
- 怎么在Windows系统中制作Mac系统U盘启动盘?
- UVA 473-Raucous Rockers(DP)
- 怎么把cad的图导入ps_CAD图如何导入Photoshop的方法
- 北航基物1101英文波尔共振实验
- 漫漫人生录 | 一个月薪 120000 的[ 北京 ] 程序员的真实生活
- 乡村振兴的道路,农村污水处理设备搭建至关重要
- openwt dns 解析部分域名出错问题。
- Java语言编写简单分数计算器
- Word 中给公式自动编号
- 阿里云域名购买至备案流程
热门文章
- 分享脚本-python3导出某个月份所有同事的文章到Excel列表
- unity中打开别人的项目,脚本中继承的父类报错(红色波浪线)VS 编译过程 error CS0246: 未能找到类型或命名空间名“XXX”
- 客户管理系统 案例分享
- 骨传导蓝牙耳机哪个好?骨传导蓝牙耳机推荐
- koa 设置cache_koa文档参考
- 那些藏在wordpress中的工具
- OCI学习-Storage:Block Volume
- 【跨境电商】独立站运营需要面临哪些困难?(二)
- [天籁之音]《斯卡布罗集市(Scarborough Fair)》
- Python-Django毕业设计房屋中介管理信息系统(程序+Lw)