HMTL5的学习断断续续,方法不用又生疏了,昨天做的一个雨伞的Demo,先看看效果

主要是运用了中心点变换和旋转两个方法。不同的动画用定时器控制,

下面是全部代码:

  <canvas id="myCanve" width="1200" height="600"></canvas>
<div id="ta"></div>
<script>
var ctx;
var everything = [];
var cwidth = 1200;
var cheight = 600;
var updowntime = 0;
var rotatetime = 0;
var my = 2;
var updown;
var rotateangle = 0; function Umbrellas(sx, sy, fillStyle) {
this.x = sx;
this.y = sy;
this.fillStyle = fillStyle;
this.draw = drawUmbrella;
this.moveit = moveumbrella;
} function drawUmbrella() {
//先画半圆
ctx.fillStyle = this.fillStyle;
ctx.beginPath();
ctx.arc(this.x, this.y, 30, 0, Math.PI, true);
ctx.closePath();
ctx.fill(); // ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(this.x - 1.5, this.y, 1.5, 40);//画伞柄 是一个细长的矩形
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(this.x - 5, this.y + 40, 4, Math.PI, Math.PI * 2, true);//伞的钩子 是一个半圆
ctx.stroke();
ctx.closePath();
} function moveumbrella(dx, dy) {
this.x += dx;
this.y += dy;
} function init() {
ctx = document.getElementById("myCanve").getContext('2d');
ctx.translate(200, 300);
for (var i = 0; i < 10; i++) {
var um = new Umbrellas(i * 70, 0, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");
everything.push(um);
} updown = setInterval(change, 100);
setTimeout(function () {
clearInterval(updown);
ctx.translate(300,0);//改变中心点
setInterval(rotat, 100);
}, 10000);
} //updown
function change() {
if (updowntime % 50 == 0) {
my = -my;
}
// 清屏要关注到原中心点
clear(-200,-300);
updowntime++; for (var i = 0; i < everything.length; i++) {
if (i % 2 == 0) {
everything[i].moveit(0, my);
} else {
everything[i].moveit(0, -my);
}
everything[i].draw();
} $("#ta").html("坐标y:" + everything[0].y + "______updowntime:" + updowntime); //放在这才有效 在执行方法里面停止
if (updowntime == 100) {
clearInterval(updown);
//过渡方法
}
} //选择
function rotat() {
clear(-400, -300);
rotatetime++; for (var i = 0; i < everything.length; i++) {
ctx.save();
ctx.rotate(Math.PI * (2 / 4 + i / 4));
ctx.translate(0, rotateangle);
// 统一坐标
everything[i].x = 0;
everything[i].y = 0;
everything[i].draw();
ctx.restore();
}
rotateangle++;
$("#ta").html("角度:" + rotateangle + " rotatetime:" + rotatetime); if (rotateangle == 70) {
rotateangle = -rotateangle;
} } function clear(x,y) {
ctx.clearRect(x, y, 1200, 600);
} window.onload = function () {
init();
}
</script>

自己觉得蛮有意思,这些小而美的东西是不是给你有所启发呢。

如果不是建立对象,则画出来的雨伞不容易控制。下面的代码就是静态的雨伞

  function drawTop(ctx,fillStyle) {
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI, true);
ctx.closePath();
ctx.fill();
} function drawGrip(ctx) {
ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(-1.5, 0, 1.5, 40);
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.restore();
} function draw() {
var ctx = document.getElementById("myCanve").getContext("2d");
ctx.translate(150, 150);
for (var i = 0; i <; i++) {
ctx.save();
ctx.rotate(Math.PI * (2 / 4 + i / 4));
ctx.translate(0, -100);
//ctx.translate(70 * i, 0);
drawTop(ctx, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");
drawGrip(ctx);
ctx.restore();
}
} window.onload=function() {
draw();
}

Html5 舞动的雨伞的更多相关文章

  1. web开发之html5---html5 动画特效舞动的雨伞

    http://www.cnblogs.com/stoneniqiu/p/4199294.html

  2. 后HTML5时代

    十二年前,无论多么复杂的布局,在我们神奇的table面前,都不是问题:十年前,阿捷的一本<网站重构>,为我们开启了新的篇章:八年前,我们研究yahoo.com,惊叹它在IE5下都表现得如此 ...

  3. html5 canvas雨点打到窗玻璃动画

    html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: <!doctype htm ...

  4. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  5. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  6. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  7. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  8. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  9. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

随机推荐

  1. NOIP2010 题解

    机器翻译 题解:模拟 #include <cstdio> #include <cstring> ; ], ]; int main(){ memset(, sizeof(in)) ...

  2. Html5应用程序缓存ApplicationCache

    应用缓存机制可以参考http://www.w3school.com.cn/html5/html_5_app_cache.asp,不再赘述.利用此机制,html5游戏可以实现和native app类似的 ...

  3. <form>属性

    当form表单中action没有值时,默认当前页方法.

  4. 1036. Crypto Columns 2016 11 02

    /* 对于题目多读几遍,然后再关键字排序的时候,把对应的数组序号也排序, EYDE    MBLR    THAN    MEKT    ETOE    EOTH        MEETME    B ...

  5. 页面点击任意js事件,触发360、IE浏览器新页面

    在<head></head>标签中 <base target=_self> 不会再增加页面

  6. 丙申年把真假美猴王囚禁在容器中跑 ASP.NET Core 1.0

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  7. Bootstrap自带的一些预定义的按钮颜色

    浅蓝色 btn-info 被用在那些用户可能会采取的操作上. 红色btn-danger被用来提醒用户该操作具有“破坏性”,例如删除一张猫的图片.

  8. 「2014-5-31」Z-Stack - Modification of Zigbee Device Object for better network access management

    写一份赏心悦目的工程文档,是很困难的事情.若想写得完善,不仅得用对工具(use the right tools),注重文笔,还得投入大把时间,真心是一件难度颇高的事情.但,若是真写好了,也是善莫大焉: ...

  9. Android图片复制

    public void saveImage2Phone(SlideShowImage image){ String imagePath; if(Environment.getExternalStora ...

  10. wince mobile环境下播放WAV声音

     [DllImport("coredll", EntryPoint = "PlaySound")]         public static extern i ...