canvas
文章平均质量分 56
编程界小明哥
CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,欢迎您关注,期待与您一起学习、成长、起飞!
展开
-
基于javascript扫雷小游戏,以前上学经常玩
引言:扫雷是系统自带的经典小游戏,以前上学那会上机的时候就经常玩这个,趁着五一假期的最后一天,用canvas编写了这个小游戏,看着还行,不知道会不会有什么我没发现的bug,难度目前是设置成简易的,如果要改难度,代码稍做修改即可。效果图实现思路1.创建9行9列的二维数组。2.设置雷:随机行数 i 和列数 j,根据随机到 i、j 从二维数组中取出对应的元素,将取到的元素设置一个属性type等于1,表示当前元素已经是雷,并且递增雷计数器,然后递归调用;如果取到的元素已经是雷了,则跳过继续执原创 2021-05-05 20:30:39 · 7492 阅读 · 40 评论 -
用JavaScript canvas做的走迷宫游戏,肝了一下午,请帮忙点个赞!
引言:上午女儿跟我去逛超市,在文具区看到一本书,总共有10幅图都是小迷宫游戏,图什么的都挺漂亮,就是有点贵应该是纸比较好,要30多块钱,我就觉得划不来(典型的铁公鸡),我就跟女儿说家里有,买了其他东西就回来了,然后网上查了一下,主要用到的是一个算法,于是吃完午饭就开始写了,这就学马老师来一波回首掏!有人可能会说你这人真抠门,这点钱都舍不得掏。我会说:这是钱的问题吗?这是专业,我们程序员的钱有那么好赚吗?我待会就跟我老婆要30块钱,说我买了个迷宫游戏书,我们程序员的钱不就是敲代码来的吗,变现有问题原创 2021-04-24 18:30:31 · 4781 阅读 · 48 评论 -
基于JavaScript Canvas的植物大战僵尸,周末爆肝之作,请点个赞再走!
引言:前两天看到小朋友在玩植物大战僵尸,想起来多年以前自己也经常玩这个游戏,它是比较经典的一款休闲游戏,然后就心血来潮就周末写了一个,花了不少时间去找素材和编码,感觉上基本的功能是做好了(要上班,没那么多时间搞),写出来大家看看,确实有点爆肝!效果图:实现思路用两张画布来实现,第一个画布绘制不用更新的东西,比如背景图、按钮、积分图,卡牌图等; 第二个画布,绘制经常更新的东西,比如僵尸的走动、僵尸吃植物、僵尸死亡、植物的摇摆、豌豆苗发射豌豆、子弹的运动、阳光的产生、阳光的收集等等原创 2021-04-20 08:27:03 · 15696 阅读 · 131 评论 -
基于Canvas的九宫格抽奖,就是仿csdn的APP做的,能过审不?
引言:九宫格抽奖一直就挺火爆,手机端也经常用,这不来了兴趣写了一波,看着效果还不错,拿出来大家唠唠!效果:实现思路 绘制出背景大图,两张图片,一张稍微小,并且稍小的图片颜色更深一些; 绘制8张白色背景的小图片(绘制的顺序?待会说明),作为奖项卡的背景,一张立即抽奖的黄色背景图片放在中间; 在对应的背景图片上,绘制出奖项图片和文字,完成整个抽奖页面的布局; 给立即抽奖的背景图片添加点击事件,点击后旋转【开启定时任务】(旋转方式有3种,目前写了顺时针一种,另外原创 2021-04-12 21:15:29 · 4322 阅读 · 37 评论 -
基于canvas的手风琴特效
引言:手风琴特效是比较常见的,我之前没有见过用canvas写的,就自己上手写了一个,拿出来分享一下,这其中处理图片的切换花了我不少时间。效果如下实现思路1.排放好图片,最前面的那张图片显示全部,其他图片放到两侧只显示20像素的边,剩余部分依次摆放放到画布外。2.绘制几个相对应的方形,每个方形大小跟对应的图片显示在画布中的大小一样,这些方形用来控制鼠标的移入事件。3.鼠标移入以后,切换图片,执行手风琴特效。绘制图片分二次处理是为了让展示的图片处于数组的后面,不会被遮盖。/原创 2021-04-08 20:28:04 · 7079 阅读 · 46 评论 -
基于JavaScript的幸运大转盘
引言:幸运大转盘在很多网站上、APP都有出现,之前的话一直也没有去琢磨,自从把canvas学了一遍后,什么都想自己做一个,这不就写了个幸运大转盘玩玩!页面效果:实现思路绘制外围的大转盘,就是绘制圆然后填充好颜色; 绘制6个扇形,因一个圆360度分成6份,故每份60度,根据度数计算出开始、结束角度,即可绘制出6个连续放置的扇形,配置不同的颜色; 在每个扇形的位置分别绘制奖项卡,也是根据角度来计算,然后把对应的图片绘上去; 在大转盘中心绘制指针图片,同时绘制一个跟图片大小接近的圆(白色填充原创 2021-04-06 17:03:20 · 3703 阅读 · 22 评论 -
基于html5 canvas的一个日期时间控件、日期选择器
引言:日期选择器是日常开发常用的控件,今天突然想用canvas来写一个,与以前的实现方式有些不一样,拿出来大家看看,当做一个对比吧!效果图:选择中选择后实现步骤绘制表格方形构造函数Rect.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Rect.prototype.render=function(context){ this.ctx=context;.原创 2021-03-29 20:45:27 · 1837 阅读 · 0 评论 -
用JavaScript写抖音很火的罗盘时钟,附源码
原生js制作在抖音上很火的罗盘布局时钟代码。带日期、月份、星期、时分秒圆盘时钟。效果图:3个构造函数文本构造函数//文字的构造函数 function Text(o){ this.x=0,//x坐标 this.y=0,//y坐标 this.disX=0,//x坐标偏移量 this.disY=0,//y坐标偏移量 this.text='',//内容 this.font=null;//字体 this.textAlign=null;//对齐方式 this原创 2021-03-25 22:03:18 · 9603 阅读 · 27 评论 -
用JavaScript实现网红太空人表盘(绝对详细、绝对原创),附源码下载
引言:网上最近太空人表盘很火,之前看到有个兄弟用svg写的,但是我也不会这个啊,我就琢磨着用canvas写了一个,效果感觉还不错,拿出来大家唠唠!效果图:思路 分两个画布来绘制,画布1用来放置不动的东西(背景、表盘、文字信息); 画布2用来绘制太空人的转动和时间的更新(经常要重新绘制); 太空人的转动的话就是用很多图片来切换,达到转动的效果。 绘制表盘圆形构造函数//构造函数 function Circle(o){ this.x=0,//圆心.原创 2021-03-25 19:05:58 · 21833 阅读 · 85 评论 -
JavaScript实现页面动态验证码
引言:现在很多在用户登陆或注册的时候为了防止程序攻击,加入了动态验证的技术,一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的,就在前端验证,发出来给大家看看。效果图:实现思路:把数字和字母放到一个数组中,通过随机的方式取得数组下标,总共取4个组成验证码; 把验证码渲染出来(一个一个的渲染); 绘制一定数量的干扰线,随机颜色; 输入验证码,输入4位以后去验证,正确显示钩,错误显示叉并且刷新验证码。编写构造函数文本构造函数//文字的构造函数 f.原创 2021-03-18 21:21:44 · 16403 阅读 · 88 评论 -
JavaScript实现拖动滑块拼图验证(html5、canvas)
引言:滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上!效果:实现思路:用一张画布绘制源图,再绘制一个填充的方形,这样就可以达到缺失的效果(方形的坐标是随机的); 再用一个画布绘制拖动块,同时用drawImage截取和上一步中方形区域一样坐标、大小的原图,就作为验证图了,把验证图放在最左边; 在拖动块处,按下鼠标然后拖动,拖动块和验证图会跟随鼠标移动,达到一定范围后放开鼠标,会进行验证; 验证通过则提示验证成功,验证不通过则拖动块和验证图会返回到最左边。原创 2021-03-15 11:30:33 · 6830 阅读 · 37 评论 -
javascript(html5 canvas)做的拼图游戏,简单易懂
趁着摸鱼的时间,写了个拼图小游戏,操作简单、提神醒脑效果图(最后的完成了好像被遮住了,哈哈)实现思路用到canvas的drawImage方法,使用8个参数的方式来将大图片切成一张张的小图,同时将每个小图片存储到对应的数组中。 在切图的同时用两个数组keys和orig_keys存取小图的下标,9张小图的话(keys就输数字0-8的数组)。 点击开始按钮的时候keys随机排序,然后从小图片数组中去获取对应的图片对象,更新其显示位置,这样就可以打乱图片了。 选择一个小图片(再次点击此图片会取原创 2021-03-12 16:03:56 · 3028 阅读 · 7 评论 -
canvas的drawImage方法参数详解
引言:canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。一旦获得了源图对象,我们就可以使用drawImage方法将它渲染到 canvas 里。drawImage方法有三种形态:drawImage(image, dx, dy) 在画布指定位置绘制原图drawImage(i...原创 2021-03-12 15:14:22 · 34179 阅读 · 7 评论 -
JavaScript模拟在雷达上用导弹打下敌机,程序员也过过当炮手的瘾!
效果图:实现思路1.首先实现一个雷达效果,参考前面的文章(https://blog.csdn.net/dkm123456/article/details/114312198);2.点击扫描按钮,雷达旋转、同时创建敌机对象,并让敌机运动起来;3.点击锁定按钮,会在敌机的位置创建锁定的图形,达到锁定的效果(因为雷达和导弹都用了小尾巴效果,所以锁定目标就用了一个新画布);4.点击发射按钮,创建导弹对象,导弹根据敌机的位置,不停的调整位置,向目标运动,当到达目标一定范围就判定为命中目标;原创 2021-03-05 09:37:30 · 1193 阅读 · 1 评论 -
html5 canvas实现雷达扫描动画特效
先看一下最终效果实现思路绘制4个圆 绘制一个十字线 绘制一个扫描的指针 让指针转起来雷达构造函数function Radar(){ this.renderArr=[];//待渲染对象存储数组 this.rotateAngle=0;//绘制的指针开始角度 this.speed=0.01* Math.PI;//绘制的指针偏移速度 this.point=null;//存储指针对象 } Radar.prototype.init=function(el原创 2021-03-03 14:51:14 · 3550 阅读 · 4 评论 -
html5 canvas绘制圆形、方形矩形、线段、图片等各种图形(面向对象版本)
概念:面向对象的方法主要是把事物给对象化,包括其属性和行为。面向对象编程更贴近实际生活的思想。总体来说面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象(万物皆对象)。绘制圆构造函数(将圆心位置、半径、缩放比例等参数都封装进去) //构造函数 function Ball(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度 this.end原创 2021-03-02 21:44:54 · 1717 阅读 · 6 评论 -
香港黄金配角吴孟达去世,80后程序员以轮播图来悼念达叔,达叔一路走好!
悼念达叔达叔和周星驰两人的无厘头搞笑喜剧一次次让我们捧腹大笑,剧中的情节让我们难以忘怀,每每回忆起来都是伴随着欢声笑语!从《逃学威龙》到《破坏之王》,从《九品芝麻官》到《武状元苏乞儿》,从《月光宝盒》到《仙履奇缘》。每一次的出现都让我们陷入新的狂欢,既有无厘头的搞笑,也有让我们潸然泪下的感动,是影视界的盛宴。尤其是我们80后的这代人,从小都是看着达叔和周星驰的电影长大的。达叔走了,我们的感怀更深,在这个飞速发展的社会里,我们又失去了生命中很重要的一部分,是属于我们年代的欢乐!仅以一个轮播原创 2021-02-28 11:58:50 · 3044 阅读 · 35 评论 -
用JavaScript写的俄罗斯方块小游戏(很简单,很详细)
效果编写外部框架<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>*{ margin: 0; padding: 0;}#box{ width:320px; height:450px; position:absolute; margin:0 auto原创 2021-02-25 21:20:15 · 9452 阅读 · 84 评论 -
用JavaScript写的贪吃蛇游戏(很简单,很详细)
效果编写外部框架<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>*{ margin: 0; padding: 0;}#box{ width:620px; height:450px; position:absolute; margin:0 auto原创 2021-02-05 11:17:20 · 29110 阅读 · 64 评论 -
仿echarts写自己的插件之线性图
看了echarts的实例,感觉蛮溜的,但是源码看得我伤神,干脆自己写一个,就花了点时间自己整了个线性图,发出来大家看看,我个人觉得代码比框架大佬的更容易理解,更容易看懂,哈哈,有点自恋,是框架大佬的太高深了吧,看的我头痛。首先来分析一下,这个图从图中,我们可以大概将这个线性图分解成多个元素xy坐标 text文本 线段line 圆Circle 提示框toast(图中没显示出来)这里我们就可以想到,如果我们写5个构造函数,分别对应这个5种元素,需要什么元素就new一个,然...原创 2021-02-03 16:23:30 · 1539 阅读 · 4 评论 -
仿抖音小球刷新进度条(两个小球转动),代码很简单
先看看效果另外一种效果实现思路1.绘制好两个小球2.让左边小球的圆心X增加,右边小球圆心X的减少,到了一定位置再回转(第1种效果) 让两个小球一个scale增加,一个scale减少,到一定范围后反转(第2种效果)创建小球的构造函数//构造函数 function Ball(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度 th...原创 2021-02-03 12:19:01 · 3862 阅读 · 14 评论 -
仿头条方形进度条
刷头条的时候看到头条的刷新进度条不错,就自己做了一个,看一下效果:看到这个就会想到怎么去实现呢?绘制方形(用4条线段的方式来绘制),不直接绘制方形。 控制右上角往下运动,同时右下角往上运动(改变Y左边即可)。 右边的运动完以后,停止右边,让左上角往下,左下角也往上运动。 左边运动完成后,停止左边,启动右边,重复此过程。先来写好绘制方形的函数 //构造函数 function DynamicRectangle(o){ this.x=0,//原点坐标X this.原创 2021-02-02 21:27:39 · 2993 阅读 · 12 评论 -
仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条,很丝滑!
先看一下最终效果 正弦曲线正弦曲线公式y = A sin(Bx + C) + D 振幅是 A,A 值越大,曲线更陡峭 B值越大 周期越短 C水平位移 垂直位移是 D,控制曲线上下移动实现思路首先来绘制曲线 1.定义构造函数和初始化方法//sin曲线构造函数 function drawSin(option){ this.init(option); } //初始化 drawSin.prototyp...原创 2021-01-27 12:56:03 · 3349 阅读 · 33 评论 -
原来写刮刮卡这么简单,几行代码就搞定,你来你也行,谢谢惠顾!
利用属性属性 globalCompositeOperation,设置值为 destination-out,后绘制的图形会擦除与先绘制图形重叠的部分效果图:思路1.写一个div,div的内容就是刮开后的结果;2.画布设置好定位,将div盖住(此时是透明的);3.在画布上画一个长方形,并使用颜色(这里使用默认的黑色),这就把卡盖住了;4.设置globalCompositeOperation属性为destination-out;4.为画布添加鼠标移动事件,在鼠标的位置画一个小圆,就原创 2021-01-26 15:39:03 · 3253 阅读 · 5 评论 -
老婆说程序员不懂浪漫,程序员默默拿起了键盘,这就亲手带你去看流星雨,女人真的会影响男人拔刀的速度!
效果图实现思路1.写一个流星对象//定义流星雨 function Fire(){ this.x=getRandom(0,canvas.width),//流星雨的x坐标 this.y=0,//流星雨的y坐标 this.radius=getRandom(0.5,2),//流星雨的半径 this.speed=getRandom(2,4),//运行的速度 this.angle=0.6*Math.PI,//发射的方向 //this.color='white';//颜色原创 2021-01-26 15:16:08 · 1818 阅读 · 14 评论 -
一个非常漂亮的圆形滑块Round Slider,可修改成圆形进度条!
滑块效果图改动百分比效果图思路首先绘制一个灰色边框的圆 ctx.translate(150,150);//坐标定位至150,150处 ctx.beginPath(); ctx.lineWidth='20'; ctx.strokeStyle='#EEEEEE'; ctx.arc(0,0,radius,0,2*Math.PI);//绘制一个完整的圆 ctx.stroke(); 再绘制一个半径一样、圆心一样蓝色的圆 ctx...原创 2021-01-21 16:19:21 · 4294 阅读 · 15 评论 -
女儿说要看烟花,但是政府规定不能放,程序员爸爸默默的拿起了键盘,程序员就是要为所欲为!
一不给政府填麻烦、二给自己省银子,三给女儿带来了开心、激动,一举三得,何乐而不为!效果图:完整代码(代码里面有详细注释就不另作说明了):<!DOCTYPE html><html> <head lang="en"> <meta charset="GBK"> <title></title> <style>body{ margin: 0; padding: 0; back原创 2021-01-19 19:45:10 · 7622 阅读 · 44 评论 -
一个精美的时钟动画
完整代码,代码有注释就不说明了<!DOCTYPE html><html> <head lang="en"> <meta charset="GBK"> <title></title> <style>* { margin: 0; padding: 0;}canvas { border: 1px solid; position: absolute; margin-left: 200...原创 2021-01-18 17:39:46 · 1073 阅读 · 6 评论 -
利用canvas绘制饼状图
代码中有注释,就不多说了很容易看明白 var canvas = document.getElementById('canvas'); canvas.width='600'; canvas.height='400'; var ctx = canvas.getContext('2d'); var sum=0;// 总和 var arr = [];//存储每一个扇形的值 var colors = [];//存储每一个扇形的颜色 var start = 0;//每一个扇形的开始π原创 2021-01-18 11:17:52 · 1207 阅读 · 1 评论 -
用canvas来绘制柱状图,简单明了,绝对实用!
首先借助图片画一个简单的柱状图var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ var image = new Image();//创建Image对象 image.src='images/1.png';//指定路径原创 2021-01-15 21:54:19 · 4335 阅读 · 3 评论 -
canvas实现一个线性图
方法drawImage(image, x, y)其中image是 image 对象,x和y 是其在目标 canvas 里的起始坐标。 var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ var image ...原创 2021-01-15 20:38:08 · 490 阅读 · 1 评论 -
canvas绘制文字
fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的. var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getCo原创 2021-01-15 20:27:17 · 2496 阅读 · 0 评论 -
canvas给文字增加阴影效果
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); draw() function draw(){ ctx.shadowOffsetX=-3;//用来设定阴影在 X轴的延伸距 ctx.shadowOffsetX=-3;//用来设定阴影在 Y轴的延伸距 ..原创 2021-01-15 19:32:07 · 2269 阅读 · 0 评论 -
canvas绘制跑马灯lineDashOffset、lineDashOffset
var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); var offset=0; function draw(){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash([10,4, 2]);//实线..原创 2021-01-15 18:00:59 · 1550 阅读 · 0 评论 -
canvas绘制虚线setLineDash
window.onload=function(){ ctx.beginPath(); ctx.setLineDash([]);//设定实线与空白的大小 ctx.moveTo(50,100); ctx.lineTo(250,100); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([4]);//设定实线与空白的大小 ctx.moveT.原创 2021-01-15 17:44:52 · 2759 阅读 · 4 评论 -
canvas的lineCap线段端点模样和 lineJoin线段连接处模样
lineCap设置线段端点显示的模样。它可以为下面的三种的其中之一:butt,round和square,默认是butt。window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); ctx.beginPath(); ...原创 2021-01-15 17:04:43 · 1511 阅读 · 2 评论 -
canvas绘制二次贝塞尔曲线、三次贝塞尔曲线、画爱心
方法说明quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。画一个二次贝塞尔曲线 window.onload=function(){ var canvas = document.getElementById('c.原创 2021-01-14 17:54:13 · 1842 阅读 · 0 评论 -
canvas画圆
画圆方法说明arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法有六个参数:x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时,是逆时针方向,否则顺时针方向。实例1 window.onload=function(){ var canvas = document.get原创 2021-01-14 17:07:15 · 13846 阅读 · 1 评论 -
canvas绘制三角形
主要还是利用画直线的方法lineTo moveTo实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='300'; var ctx = canvas.getContext('2d'); //先将笔尖移动到0,0处 ctx.moveTo(100,100); //先将笔滑到200,200处..原创 2021-01-14 16:16:11 · 4125 阅读 · 0 评论 -
canvas绘制直线
说明: lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 stroke() 描边 lineWidth 设置线的宽度 strokeStyle 设置线条的颜色实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='...原创 2021-01-14 16:00:14 · 3795 阅读 · 0 评论