html5制作风车旋转,HTML5 Canvas 旋转风车绘制
写在前面:
亲爱的朋友们大家好,鄙人自学前端,第一次写博客,写的不好的地方,烦请同学们谅解.
在进行教学之前,我想聪明的你已经掌握了基本的Canvas基本操作方法,如果对Canvas还不是很了解,那么我建议你去http://www.w3school.com.cn/tags/html_ref_canvas.asp这里先熟悉一下;
okey!下图即是我们完成后的简单效果,心动不如行动,那么咱们就进行简单绘制吧!
1、定义画布
首先我们现在html文件里面插入标签,定义画布的尺寸,我这里定义画布的尺寸为800*600像素。同时在内部样式表里面设置canvas的背景色(方便画图时观看);
Document
body{
padding: 0;
margin: 0;
}
#canvas {
background:#5151a2;
}
接下来的核心就是在原生JS环境下,绘制风车;通过JS DOM操作方法获取到canvas元素对象,并通过getContex("2d")获取2D绘图上下文,通过这个方法就像是要告诉浏览器“我们要在这个画布上绘制2d图形”;
//获取画布的2d上下文
var ctx = document.getElementById("canvas").getContext("2d");
2、绘制风车底座
风车的底座的几何图形看似就像一个细长细长的梯形,我们可以画出一个梯形出来,然后填充颜色,这里为了达到相对较好的效果,使用了颜色渐变填充的方法;okey!直接看代码吧~~!
//定义一个函数 ,封装风车的底部基座
function buttom(){
ctx.beginPath(); //开始一条新的绘制路径
var liner = ctx.createLinearGradient(390,600,410,600); //设置变量(颜色渐变的方向-起点-终点)
liner.addColorStop(0,"#ccc"); //设置起点颜色
liner.addColorStop(0.5,"#fff"); //设置中点颜色
liner.addColorStop(1,"#ccc"); //设置终点颜色
ctx.fillStyle = liner; //梯形的填充方式设置为 变量(渐变颜色)
ctx.moveTo(395,300); //提起我们的画笔,起点设置为(395,300)
ctx.lineTo(405,300); //连接起点画线
ctx.lineTo(410,600);
ctx.lineTo(390,600);
ctx.closePath(); //闭合路径
ctx.fill(); //填充梯形
}
buttom(); //要调用函数,才能在浏览器显示
我们来看一下页面中的效果,是不是很简单?
(我感觉我话有点多哦~!~!)
3、绘制叶子
接下来的部分将是这个动画中最关键的地方,首先我们分析一下叶子的结构,三片叶子夹角为120°,而且每片叶子的形状是相同的;他们有一个圆心,你心中或许也有疑问,先画圆心还是先画叶子?叶子的形状应该怎么画呢?叶子可不可复制粘贴呢?答案当然是可以的,Let's do it!
思路分析:
1)、由于3片叶子的形状是一模一样,我们只需要画出一片叶子,第二第三片叶子直接copy就行了,聪明的我们是不是应该给这个叶子的画法封装一个函数呀?就叫它bind( )函数吧!!每次调用它就可以了!哎!你们TM太机智了
2)、三片叶子有一个圆心,绘制叶子的时候为了方便取坐标值,我们将圆心从画图的左上角移动梯形顶部,这样我们绘制叶子会方便很多!这里使用了translate()方法,移动坐标系!
3)、最难的一点就是理解这里动画是怎么实现的,因为动画原理会影响到我们画叶子的文档结构:
首先我们先新建一个绘图环境,我们称它为环境1,我们在环境1上画完第一片叶子;然后在 第一个绘图环境前提下 旋转120°新建第一个绘图环境2,再此基础上调用画叶子的函数bind( ),绘制二片叶子;第三片叶子的绘制方法如法炮制,在环境2的基础上旋转120°,新建环境3,调用绘制叶子函数bind( )画第三片叶子;
如果要实现动画,我们只需要旋转第一片叶子的绘图环境1,第二片叶子和第三片叶子都是参照环境1为基准画出来的,是不是也跟着动起来了呢?? 弹幕:666666
4)、最后就是一些基本的外观样式调试的啦!比如颜色渐变啊,透明度啊,之类的!
绘制叶子
画这个叶子形状的时候我是慢慢调试的,我的审美相当low,原谅我只能画出这样的叶子,当然想象力丰富的同学可以根据自己喜好来绘制,不过大体思路是一致的;
这里我声明了一个变量 var num = 0;,作为环境1旋转度数变化的一个参数: 那么咱就直接看代码吧!!!
var num =0;
function yezi(){
ctx.save(); //保存默认情况下的canvas变换状态
ctx.beginPath();
ctx.translate(400,300);
// ctx.globalAlpha = 0.9;
// 设置第一次状态下 坐标系旋转度数
ctx.rotate((Math.PI/180)*num);
var liner1 = ctx.createLinearGradient(30,-12,30,12); //这里设置颜色渐变填充的样式
liner1.addColorStop(0,"#ccc");
liner1.addColorStop(0.5,"#fff");
liner1.addColorStop(1,"#ccc");
ctx.fillStyle = liner1;
ctx.save(); //保存第一次状态 平移坐标系变换
ctx.beginPath();
bind(); //调用函数
//绘制第二片叶子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐标系旋转120°
ctx.save(); //保存旋转坐标系状态,为第三片叶子做铺垫
bind(); //调用函数
//绘制第三片叶子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐标系旋转120°
ctx.save();
bind(); //调用函数
ctx.restore(); //回复第3次状态前(旋转坐标系)
ctx.restore(); //回复第2次状态前(旋转坐标系)
//绘制叶子中心圆圈
ctx.beginPath();
var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16);
arcgradient.addColorStop(0,"#ccc");
arcgradient.addColorStop(0.1,"#fff");
arcgradient.addColorStop(1,"#ccc");
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fillStyle = arcgradient;
ctx.fill();
ctx.restore(); //回复第1次状态前(平移坐标系)
num+=5; //第一状下 环境1 态坐标系旋转度数增加********************************这个num使得环境1的旋转角度在不停的变化,**********************************************
ctx.restore();
}
//绘制每片叶子都重复的代码,这里做一个函数包装
function bind(){
ctx.moveTo(0,0);
ctx.quadraticCurveTo(10,-12,30,-12); //比赛尔曲线
ctx.lineTo(190,-3);
ctx.quadraticCurveTo(200,0,190,3);
ctx.lineTo(30,12);
ctx.moveTo(0,0);
ctx.quadraticCurveTo(10,12,30,12);
ctx.fill();
}
4、设置动画
动画这部分就比较简单了,设置定时器,清除画布,调用函数;大功告成,打完收工!!!
setInterval(function(){
ctx.clearRect(0,0,800,600); //每次执行代码前,都要将画布清空,不然画出的图形会滞留在画布上;
buttom(); //调用函数
yezi();
},50);
源码:https://github.com/224137748/Canvas/blob/master/windmill.html
html5制作风车旋转,HTML5 Canvas 旋转风车绘制相关推荐
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
1.离线存储:1)存储到本地,可以离线浏览网页 2)不用cookie(安全性不太高,来回交互的数据量比较大) 2.语音识别 3.图像识别 4.HTML5游戏 5.CSS3的强大之处:动画和各种选择器 ...
- 用html5制作机柜,基于HTML5 Canvas 点击添加 2D 3D 机柜模型
今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考.这个例子看起来很简单,实际上结合了数据模型中非常重要的三个事件处理的部分:属性变化事 ...
- android画布旋转,Android canvas旋转:需要***旋转*不**
Canvas中旋转方法的文档指出,度参数是"旋转量(以度为单位)".但是,以我的经验,这是令人误解的.例如,如果我在位图处于规范的直立方向(即theta = 0,即12:00)时调 ...
- 马里奥大逃亡html5 制作,玩家用HTML5打造《马里奥大陆》
人类已经阻止不了马里奥了!这个26年前诞生的超级水管工伴随着无数人度过了无数个无聊的日子,从FC上的<超级马里奥兄弟>开始便簇拥众多.随着游戏主机世代更迭,马里奥作品也在不断进化.不过回忆 ...
- 使用html5制作表格
使用html5制作表格 使用html5制作表格 使用html5制作表格 我是一位大一学生,听老师说写博客有利于自身成长,今天偶然看到这个网页,写下第一次自己的博客. 这是一次老师布置的简单的作业,创建 ...
- 用纯HTML5制作网站
HTML5制作网页 目录 HTML5制作网页 前言 彻底搞懂HTML背景颜色问题 多html连接 网页标题的图标 前言 大家好,我是小赵,最近在搞web开发,相信很多贴友都有一个想自己开发网站的愿望, ...
- html5 中心点旋转,html5 canvas围绕中心点旋转
围绕中心点旋转 window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canva ...
- canvas 形状碰撞_【案例】如何用html5 制作canvas酷炫的网状图形动画特效
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源 哈喽大家好,又到了每周二案例环节啦,在教学开始前先插播一条招聘信息~ 高薪招聘 杭州招聘(非技术) 公司背景: ...
- html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- html制作小车,HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
当前位置:编程学习 > html/css >> HTML5 实现小车动画效果(Canvas/CSS3/JQuery) HTML5正在变得越来越流行.在这个移动设备日益增长的时代,对来 ...
最新文章
- SMS系列之六:利用SMS实现操作系统的补丁分发
- 美团面试题:JVM 堆内存溢出后,其他线程是否可继续工作?
- 圈钱跑路 ERC20 Token 合约代码分析
- 物流行业应用虚拟化解决方案
- c# 定位内存快速增长_改善C#程序,提高程序运行效率的50种方法
- 每天一个linux命令-curl命令
- iframe导致的IE6下https页面安全提示
- 13数据库表空间回收
- [Silverlight动画]转向行为 - 路径跟随
- R与Python或协同助力机器学习:听Azure ML Studio讲座有感
- Atitit xml转json总结 目录 1.1. XML和JSON之间没有直接映射;元素类型问题	1 1.2. Xml与json的对应关系	2 1.3. 范例	2 2. Jsonlib的问题,,不
- ZZULIOJ 1168
- python制作字符动画
- 如何用python批量下载数据_如何基于Python批量下载音乐
- 使用httpclient调用url出现错误Illegal character in scheme name at index 0解决方案
- CSAPP 存储器山数据的测量以及绘制,Cache lab part A:Cache simulator
- Linux:使用upower命令查看电池信息
- vue.js和vue.main.js下载地址
- 【全教程】qt连接mysql——从qt编译mysql驱动到qt连接mysql数据库(一、编译连接前准备)
- php mysqli操作数据库
热门文章
- 10个3分钟锁住健康
- than用法总结(基于材料:“老托福听力93篇”)
- 说说Android真机调试的那些坑吧
- 判断一个数为质数或合数
- 如何简单的创建一个多人在线聊天室
- 挑战一天(12h)刷完《剑指offer》67题
- 百度for android,百度视频 for Android
- 《畅玩NAS》第1章 Hpe Microserver Gen10 Plus开箱及硬盘安装
- VUE 项目去除 input 框值 所有空格
- /etc/bashrc “command not found: shopt“ 报错解决