js渲染canvas的问题??????依次开100朵花

怎么依次开10朵。饱满的。。。。

我上代码,jquery自己下载

<!doctype html>

<html>

<head>

<title>Love</title>

<meta charset="gbk" />

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        var show_demo = function (id) {
            var b = document.body;
            var c = document.getElementsByTagName(‘canvas‘)[id];
            var a = c.getContext(‘2d‘);
            document.body.clientWidth;
            var show = function () {
                with (m = Math)
                    C = cos, S = sin, P = pow, R = random;
                c.width = c.height = f = 500;
                h = -250;

};
            show();
            var p = function (a, b, c) {

if (c > 60)
                    return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a];
                A = a * 2 - 1;
                B = b * 2 - 1;
                if (A * A + B * B < 1) {
                    if (c > 37) {
                        n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300;
                        w = b * h;
                        return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6]
                    }
                    if (c > 32) {
                        c = c * 1.16 - .15; o = a * 45 - 20;
                        w = b * b * h;
                        z = o * S(c) + w * C(c) + 620;
                        return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7]
                    }
                    o = A * (2 - b) * (80 - c * 2);
                    w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700;
                    return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05]
                }
            };
            var my_for = function () {
                console.log("当前计时器"+id);
                for (i = 0; i < 1e4; i++)
                    if (s = p(R(), R(), i % 46 / .74)) {

z = s[2];
                        x = ~~(s[0] * f / z - h);
                        y = ~~(s[1] * f / z - h);
                        if (!m[q = y * f + x] | m[q] > z)
                            m[q] = z, a.fillStyle = "rgb(" + ~(s[3] * h) + "," + ~(s[4] * h) + "," + ~(s[3] * s[3] * -80) + ")", a.fillRect(x, y, 1, 1)
                    }
            }
            return setInterval(my_for, 0);
        }
        var gg = undefined;
        $(function () {

for (var i = 0; i < 2; i++) {
                if (i % 3 == 0) $("body center").append("<br>")
                $("body center").append($(‘<canvas id="‘ + i + ‘" style="width:100px;height:100px;"></canvas>‘));
                gg = show_demo(i);
                clear(gg);
               
            }
        });
        function clear(t)
        {
            setTimeout("clearInterval("+t+")", 5000)
        }

</script>

</head>

<body>

<center><marquee style="font-size:50px;color:red;" scrollamount=2 width=400>测试</marquee></center>
    <h1></h1>
    <center></center>
</body>

</html>

时间: 2024-10-28 20:33:16

js渲染canvas的问题??????依次开100朵花的相关文章

Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

three.js通过canvas实现球体世界平面地图

概况如下: 1.SphereGeometry实现自转的地球: 2.THREE.CatmullRomCurve3实现球体线条地图点确定: 3.THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换: 4.MeshLine用于绘制线条: 5.canvas用于绘制球体世界地图贴图,通过THREE.CanvasTexture引入. 效果图如下: 预览地址:three.js通过canvas实现球体世界平面地图 初始化场景.相机.渲染器,设置相

手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染

系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取 老规矩,爬之前首先感谢淘宝公布出这么多有价值的数据,才让我们这些爬虫们有东西可以搜集啊,不过淘宝就不用我来安利了 广大剁手党相信睡觉的时候都能把网址打出来吧. 工欲善其事,必先利其器,先上工具: 1.神箭手云爬虫,2.Chrome浏览器 3.Chrome的插件XpathHelper 不知道是干嘛的同学请移步第一课

Java使用HtmlUnit抓取js渲染页面

需求: 需要采集js渲染的页面,有些网站的页面是js渲染的 实现: 基于HtmlUnit实现: public static void getAjaxPage() throws Exception{ WebClient webClient = new WebClient(); webClient.setJavaScriptEnabled(true); webClient.setCssEnabled(false); webClient.setAjaxController(new NicelyResy

fabric.js的简单上手及基于fabric.js的canvas切图工具:1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库. Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具.基于MIT协议开源,在github上有许多人贡献代码. 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍

20140505 科技脉搏 - “社交”这棵老树,依然在开着新花

★Ⅰ焦点关注          ◎云服务 寂寞...          ◎新媒体 三个角度看:丧钟为何为纸媒和银行而鸣                        ◎大数据 寂寞...          ◎可穿戴设备 未来,设备或都懂你感受          ◎电商 寂寞...          ◎O2O 寂寞... ★Ⅱ巨头动态 腾讯COO任宇昕:如何享受移动互联网红利? 腾讯COO任宇昕:无论是巨头,还是新创公司,做连接型的公司,将能更好地享受移动互联网红利. 马云450亿:"绑架&quo

用js控制canvas实现的模仿windows上单选、多选及拖动控制的toy program

功能包括:鼠标点击单选.拖动多选.ctrl+单击组合效果.对选中的单个或多个canvas图层通过鼠标拖动.方向键移动.delete删除图层等. 感觉复杂的地方主要在控制逻辑上,下面是全部代码(带注释哦),可以直接复制保存为html文件在浏览器里查看效果 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&

three.js - 渲染并展示三维对象

看结果: 看源码及解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First Scene</title> <style type="text/css"> body { /*移除所有的滚动条*/ margin: 0; overflow: hidden; } </

【开源专访】Sea.js创始人玉伯的前端开发之路

摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框