HTML5 Canvas “红心一棵” - 心中的利剑：HTML5 Canvas游戏动画（JavaScript） - ITeye博客

`

128kj

浏览: 586016 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

lgh1992314：相同的元素呢
一种离散化方法
HelloSummerR：圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件
hlstudio：好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java)
肖泽文：太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画
swm8023：删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）

HTML5 Canvas “红心一棵”

博客分类：

javascript
HTML5 动画游戏

html5 html JavaScript canvas

阅读更多

效果图：

笛卡尔公式:r = a(1-sin弧度)画“红心”。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>HTML5 Canvas“红心一棵”</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script>
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext('2d');
   var width=canvas.width;
   var height=canvas.height;
   context.fillStyle="red";
   var x,y,r;
     for(var i=0;i<=90;i++)
      {
         for(var j=0;j<=90;j++)
         {
            r=Math.PI/45*i*(1-Math.sin(Math.PI/45*j))*18;
            x=r*Math.cos(Math.PI/45*j)*Math.sin(Math.PI/45*i)+width/2;
            y=-r*Math.sin(Math.PI/45*j)+height/4;
            context.beginPath();
            context.arc(x,y,1,0,Math.PI*2);
            context.fill();
         }

      }
</script>
<body></html>

热情奉献：HTML5 Canvas绘图与动画学习59例源码：
http://www.108js.com/example.html

查看图片附件

0
顶

0
踩

分享到：

HTML5 Canvas 圆弧动画（绕四周运动） | HTML5 Canvas画印章

2014-05-08 10:38
浏览 1250
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

2023元旦倒计时代码: 随着时光的流逝，小红心淡入浅出，就像身边人对我们的爱一样，倍感美好，在2022最后的一个月里，愿我们都能珍惜时间，努力上进，不辜负美好的时光，像代码中的祝福语一样，平安喜乐，顺心如意。愿你享有期望中的...

Google Android SDK开发范例大全(PDF高清完整版1)（4-1）: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK开发范例大全(PDF高清完整版3)（4-3）: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK开发范例大全(PDF完整版4)（4-4）: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK开发范例大全的目录: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google+Android+SDK开发范例大全: Google Android SDK开发范例大全(完整版)共4个分卷目录第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 ...

Google Android SDK开发范例大全(完整版附部分源码).pdf: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个...

Google Android sdk 开发范例大全部分章节代码: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK 开发范例大全01: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK 开发范例大全02: 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Google Android SDK开发范例大全(完整版): 第1章了解.深入.动手做. 1.1 红透半边天的Android 1.2 本书目的及涵盖范例范围 1.3 如何阅读本书 1.4 使用本书范例 1.5 参考网站第2章 Android初体验 2.1 安装AndroidSDK与ADTplug-in 2.2 建立第一个Android项目...

Global site tag (gtag.js) - Google Analytics