web前端：canvas画布，飞鸟动画，原生js

1.效果图

2.less

* {margin: 0;padding: 0;#wrap {width: 600px;height: 800px;background: tomato;border: 2px solid white;border-radius: 5%;//这里不可使用position，会影响画布的坐标定位left: 0;top: 0;right: 0;bottom: 0;margin: 5% auto;font: 20px "微软雅黑";text-align: center;color: white;transition: 2s;&:hover {background: steelblue;}h1 {margin-top: 8%;}h2 {margin-left: 30%;margin-top: 100%;}#wrap-canvas {position: absolute;background: white;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}}
}

3.js

$(function(){var canvasNode=document.querySelector("#wrap-canvas");//调整画布大小，全视口//canvasNode.width=document.documentElement.clientWidth;//canvasNode.height=document.documentElement.clientHeight;canvasNode.background="white";if(canvasNode.getContext){var canvasPen=canvasNode.getContext("2d");var imgFlag=0;var translatex=0;//控制移动setInterval(function(){//img有残留，需要清理canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);imgFlag++;//++1translatex+=10;if(imgFlag==9){imgFlag=1;}var img=new Image();img.src="img/q_r"+(imgFlag)+".jpg";img.onload=function(){//传入img到函数imgDraw(this);}//7秒60次},7000/60);/* canvas本身为png图片输出* canvas插入图片，需要image对象* 1.canvas操作图片，必须要等图片加载完毕* 2.drawImage(image,x,y,width,height)*   image:是image或者canvas对象，(y,y)为在canvas中的起始坐标*   width/height：图片的宽高设置* */function imgDraw(img){canvasPen.drawImage(img,translatex,translatex);};canvasPen.save();canvasPen.fillStyle="tomato";canvasPen.beginPath();canvasPen.fillRect(250,250,100,100);canvasPen.restore();}
})

4.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /><title>canvas动画-fly bird</title></head><link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" /><link rel="stylesheet" href="css/14-canvas-flybird.css" /><body><div id="wrap"><h1>canvas动画-fly bird</h1><canvas id="wrap-canvas" width="500px" height="500px"></canvas><h2>PS：一刀coder</h2></div></body><script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script><script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="js/14-canvas-flybird.js"></script></html>

web前端：canvas画布，飞鸟动画，原生js相关推荐

几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
Web前端书单从HTML到JS到AJAX到HTTP从框架到全栈
前言:技术书阅读方法论一.速读一遍(最好在1~2天内完成) 人的大脑记忆力有限,在一天内快速看完一本书会在大脑里留下深刻印象,对于之后复习以及总结都会有特别好的作用. 对于每一章的知识,先阅读标题, ...
html5 原生插件,前端必备插件之纯原生JS的瀑布流插件Macy.js
这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比 ...
前端绘制k线图 -- 原生js canvas图表绘制
样式如下图源码地址: https://github.com/sutianbinde/charts 演示地址:kchart.html 编写这个需要具备canvas基础,如果没有canvas基础可以学习 ...
Web前端笔记-画布拖动及放缩（two.js）
程序运行截图如下: 结构图如下: 关键代码如下: 界面调用 HelloWorld.vue <template><div><div id="draw-shapes ...
Web前端单词大全（html+css+js+vue）
style 修饰 width 宽度 height 高度 title 想说明的 text-align 水平对齐方式 center 居中 left 居左 right 居右 line-height 垂直对齐 ...
web前端练手小项目——使用js实现2048小游戏
实现的效果图: 计分规则:每合并一次增加两个分游戏涉及到的文件: 实现的html代码: <!DOCTYPE html> <html lang="en">& ...
Web前端Canvas实战纯HTML5、CSS、JavaScript实现绘画板
效果图后续会跟进共享绘画版,也就是多人同时绘画,正在学通信方面的知识,有懂这方面的小伙伴帮帮我呀(手动点赞) 源码(可以直接跑起来使用,注释很详细) <!DOCTYPE html> &l ...
❤ ❤分享一个WEB前端canvas鼠标滑过星空背景特效超好看❤ ❤
一.实现效果二.代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
挑战记忆力-Web前端实现记忆纸牌游戏（JS+CSS）
游戏介绍: js实现扑克牌翻牌记忆小游戏代码.连续点击翻开两张扑克牌,相同去重,不同则合上重新翻,考验你的记忆力.

web前端：canvas画布，飞鸟动画，原生js

1.效果图

2.less

3.js

4.html

web前端：canvas画布，飞鸟动画，原生js相关推荐

最新文章

热门文章