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

`

128kj

浏览: 600202 次
来自: ...

最近访客更多访客>>

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
浏览 1283
评论(0)
分类:Web前端
查看更多

评论

发表评论

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

相关推荐

HTML5 Canvas圆形爱心点赞按钮冒泡动画特效: 1. **HTML5 Canvas基础**：Canvas是一个HTML元素，通过JavaScript来绘制2D图形。它通过`<canvas>`标签在HTML文档中定义，并用JavaScript的`CanvasRenderingContext2D`对象来操作，提供了一系列的绘图方法，如`...

HTML5 Canvas爱心飘动动画特效.rar等3个文件.zip: Canvas是HTML5的一个重要组成部分，它提供了一个二维绘图表面，开发者可以使用JavaScript来绘制图形、动画和其他视觉元素。这个特效利用了Canvas的drawImage()方法来绘制爱心，并通过定时器更新画面，实现爱心的飘动...

HTML5红心K扑克牌翻转特效.rar: 1. **Canvas**：HTML5的Canvas是一个基于矢量图形的画布，通过JavaScript来绘制和操作图形。在这个案例中，可能使用了Canvas来绘制扑克牌的正面和反面，并通过编程控制其翻转动画。 2. **CSS3 Transform**：CSS3的...

[网页素材][flash透明背景]红心: 但过去积累的大量Flash素材，如“透明背景红心”，仍可通过Adobe Animate等工具转换为HTML5 Canvas或SVG格式，以适应新的网页标准，保持其在网页设计中的活力。总的来说，“[网页素材][flash透明背景]红心”代表了...

HTML5_biaobai.rar: HTML5是一种先进的网页标记语言，它是HTML4的升级版，为网页开发带来了许多新的功能和改进，极大地提升了用户体验。这个名为"HTML5_biaobai.rar"的压缩包文件，显然是一个利用HTML5技术制作的创意动态网页项目，可能...

HTML+CSS+JS 画出一颗一颗跳动的红心: 创建了一个 <canvas> 元素，并使用 JavaScript 中的 Canvas API 绘制了一个红色的心形。这个心形是通过贝塞尔曲线（bezierCurveTo 方法）绘制的，这种方法可以创建平滑的曲线边缘。可以调整曲线的控制点和终点来改变...

H5研发的一个坦克大战游戏(FC的版本): 《H5研发的一个坦克大战游戏(FC的版本)》是一款基于HTML5技术开发的在线游戏，旨在重现经典FC（Family Computer）平台上的坦克大战游戏体验。这款游戏由开发者在学习JavaScript时制作，通过参考其他项目，将道具系统...

一个闪烁并且发光的红心: 使用 canvas 的全局 alpha 属性来调整心形的透明度，从而制造出闪烁的效果。同时，使用 shadowBlur 和 shadowColor 属性来添加发光效果。心形会周期性地改变其透明度，从而产生闪烁效果。但不知道为什么只有发光的...

新年倒计时加绚丽烟花.zip: 在这个项目中，你可以设置一个倒计时时间，期间会有动态的红心在屏幕上飘动，这些红心会跟随用户的鼠标移动而增加，营造出一种浪漫且温馨的氛围。这种互动设计是通过JavaScript和CSS3等前端技术实现的，它们允许...

喜欢，点赞按钮的动态效果: 这通常涉及到CSS（层叠样式表）用于设计外观，JavaScript或其库（如jQuery）用于处理用户事件和动态行为，以及可能的HTML5的Canvas或SVG（可缩放矢量图形）来创建复杂动画。在"LikeButton-master"这个压缩包中，...

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

binhbo12456.github.io: 7. **HTML5新特性**：如`<audio>`和`<video>`媒体元素，`<canvas>`用于图形绘制，`<svg>`用于矢量图等。 8. **响应式设计**：使用`<meta>`标签的`viewport`属性，媒体查询`@media`，以及CSS Flexbox或Grid布局来适应...

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 建立第一个...

Global site tag (gtag.js) - Google Analytics