【canvas草稿】(待完善)

最新推荐文章于 2024-04-24 09:22:16 发布
最新推荐文章于 2024-04-24 09:22:16 发布
阅读量66 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/surprise7/p/5498414.html
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        #canvas{
            background: #000;
        }
    </style>
    <body>

        <canvas id="canvas" width="1920" height="1080"></canvas>

        <script src="jquery/jquery.js"></script>
        <script>
            var canvas = document.getElementById("canvas");
            var canvasWidth = canvas.width;
            var canvasHeight = canvas.height;
            var context = canvas.getContext("2d");
            var flowers = [];
            var flowersLength = 50;
            var speed = 0;
            /**
             * 单击canvas生成随机大小、颜色、透明度的花
             */
            function drawCurve() {
                drawFlowers();
                canvas.addEventListener("mousemove", function(event){
                    // drawHexagon(event);
                    $("#canvas").queue(function(next){
                        var r = parseInt(Math.random() * 50 + 50);
                        var angle = Math.random() * Math.PI * 2;
                        var speed = Math.random() * 0.04 + 0.01;
                        var dropSpeed = Math.random() * 4 + 1;
                        var flower = new Flower(event.offsetX, event.offsetY, r, angle, speed, dropSpeed);

                        // flower.draw(context);
                        flowers.push(flower);
                        if(flowers.length >= flowersLength) {
                            flowers.shift();
                        }
                        $(this).dequeue();
                    });
                }, false);
            }
            /**
             * 根据六边形生成花瓣
             * 以六边形的每个点作为三阶贝塞尔曲线的控制点的基础点
             * @param {Number} x [六边形中点x坐标]
             * @param {Number} y [六边形中点y坐标]
             * @param {Number} r [六边形边长]
             */
            function Flower(x, y , r, angle, speed, dropSpeed) {
                this.x = x;
                this.y = y;
                this.r = r;
                this.angle = angle;
                this.speed = speed;
                this.dropSpeed = dropSpeed;
                this.point = [
                    [
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}
                    ],
                    [
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}
                    ],
                    [
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5},
                        {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}
                    ]
                ]
            }
            /**
             * 绘制一朵花的六瓣花瓣
             * @param  {Object} ctx [canvas上下文]
             */
            Flower.prototype.draw = function(ctx) {
                var x = this.x;
                var y = this.y;
                var R = this.r;
                var points = this.point;
                for(var j = 0; j < 3; j++) {
                    for(var i = 0; i < 6; i++) {
                        points[j][i].x = R * Math.sin(this.angle + Math.PI / 3 * i);
                        points[j][i].y = R * Math.cos(this.angle + Math.PI / 3 * i);
                        if(i == 5){
                            drawFlower(x, y, R, points[j][i], points[j][0], ctx);
                        } else {
                            drawFlower(x, y, R, points[j][i], points[j][i+1], ctx);
                        }
                    }
                }
            }
            /**
             * canvas中绘制花
             * @param  {Number} x      [鼠标单击点的x坐标]
             * @param  {Number} y      [鼠标单击点的y坐标]
             * @param  {JSONObject} pointA [贝塞尔曲线控制点A]
             * @param  {JSONObject} pointB [贝塞尔曲线控制点B]
             * @param  {Object} ctx    [canvas上下文]
             */
            function drawFlower(x, y, R, pointA, pointB, ctx){
                if(!pointA.color){
                    var r = parseInt(Math.random() * 255);
                    var g = parseInt(Math.random() * 255);
                    var b = parseInt(Math.random() * 255);
                    var a = Math.random() * 0.7 + 0.3;
                    var colorArr = [r,g,b,a];
                    var color = colorArr.join(",");
                    pointA.color = color;
                }
                ctx.save();
                ctx.translate(x, y);
                ctx.beginPath();
                ctx.moveTo(0, 0);
                ctx.bezierCurveTo(pointA.x * pointA.offsetX, pointA.y * pointA.offsetY, pointB.x * pointB.offsetX, pointB.y * pointB.offsetY, 0, 0);
                ctx.strokeStyle = "rgba(" + pointA.color + ")";
                ctx.stroke();
                ctx.restore();
            }
            /**
             * 绘制六边形
             */
            function drawHexagon(event) {
                var x = event.offsetX;
                var y = event.offsetY;
                var r = 60 || parseInt(Math.random() * 25 + 5);
                var angle = 0;
                var tempR = Math.cos(Math.PI / 6) * r;
                var a = r * Math.sin(angle);
                var b = r * Math.cos(angle);
                context.save();
                context.translate(x, y);
                context.beginPath();

                context.moveTo(r * Math.sin(angle), r * Math.cos(angle));
                context.lineTo(r * Math.sin(angle + Math.PI/3*1), r * Math.cos(angle + Math.PI/3*1));
                context.lineTo(r * Math.sin(angle + Math.PI/3*2), r * Math.cos(angle + Math.PI/3*2));
                context.lineTo(r * Math.sin(angle + Math.PI/3*3), r * Math.cos(angle + Math.PI/3*3));
                context.lineTo(r * Math.sin(angle + Math.PI/3*4), r * Math.cos(angle + Math.PI/3*4));
                context.lineTo(r * Math.sin(angle + Math.PI/3*5), r * Math.cos(angle + Math.PI/3*5));
                context.lineTo(r * Math.sin(angle), r * Math.cos(angle));

                context.strokeStyle = "red";
                context.stroke();
                context.closePath();


                /*context.beginPath();
                context.arc(0, 0, r, 0, Math.PI * 2, false);
                context.strokeStyle = "darkgreen";
                context.stroke();
                context.closePath();*/

                context.restore();
            }

            function drawFlowers() {
                context.clearRect(0, 0, canvasWidth, canvasHeight);
                if(flowers && flowers.length) {
                    for(var i = 0; i < flowers.length; i++) {
                        flowers[i].draw(context);
                        flowers[i].angle += flowers[i].speed;
                        flowers[i].y += flowers[i].dropSpeed;
                    }
                }
                
                window.requestAnimationFrame(drawFlowers);
            }
            window.onload = drawCurve;
        </script>
    </body>
</html>
View Code

 

转载于:https://www.cnblogs.com/surprise7/p/5498414.html

weixin_34351321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 高性能编程 —— Data Access 数据访问
cccloveforever的博客
04-20 1510
经典计算机科学的一个问题是确定数据应当存放在什么地方，以实现最佳的读写效率。数据存储在哪里， 关系到代码运行期间数据被检索到的速度。在 JavaScript 中，此问题相对简单，因为数据存储只有少量方 式可供选择。正如其他语言那样，数据存储位置关系到访问速度。每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访 问的性能差异是微不足道的。访问数组项和对象成员的代价要高一些，具体高多少，很大程度上依赖于浏 览器。
23.敏捷优秀实践 - 产品开发流程
YYDataV的博客
06-27 1613
敏捷产品开发模式是持续的产品开发模式，不断迭代循环，持续打磨产品，整个循环过程分为五大步骤，如图所示。 （1）创意漏斗——无论是ToB产品还是ToC产品，首先都会对众多创意进行过滤，确定高优先级、高价值的产品方向。如果涉及多个业务线，还需要规划在有限的可承担的成本和人力投入下，各业务线业务需求的投入百分比，进行组合管理。 （2）探索分析——利用同理心，站在用户的角度探索用户，挖掘用户的痛点和需求，考虑用户体验，构思解决方案，并对其进行验证。 （3）产品规划——将需求条目化，并从用户角度对条目进行描
想学Web前端开发，应该怎么自学？
趣谈前端
09-02 834
大厂技术坚持周更精选好文hello, 大家好, 我是徐小夕, 之前很多朋友问我前端应该怎么学, 怎样才能提高前端开发的段位, 作为一名非科班出生的前端程序员, 这里分享一下我对自学前端的看法.非科班生如何快速逆袭, 成为独当一面的前端工程师?就拿我本人的亲身经历来说吧大学读的是工业&设计相关的专业, 对工业制造, 精益生产, 工业产品设计有一定的造诣, 但是和互联网领域比如前端, ...
VB-Helper：坚守脚本
st780206的专栏
01-26 340
无论您怎样努力尝试，都无法预测每个用户的需求。而且不管您是否能够按时或按产品版本获得回报，经常添加一些新功能都是非常诱人的好处，尽管这常常是单调乏味的工作。但是，如果您的应用程序具有足够的灵活性，用户通常就能够实现他们自己的解决方案。本月，Rod Stephens 阐述如何向您的 VB.NET 程序中添加脚本。然后，在用户请求新的功能时，您就可以让他们亲自动手。最近，我一直在着手撰写我的最新著
net脚本
溪风的专栏
08-25 560
无论您怎样努力尝试，都无法预测每个用户的需求。而且不管您是否能够按时或按产品版本获得回报，经常添加一些新功能都是非常诱人的好处，尽管这常常是单调乏味的工作。但是，如果您的应用程序具有足够的灵活性，用户通常就能够实现他们自己的解决方案。本月，Rod Stephens 阐述如何向您的 VB.NET 程序中添加脚本。然后，在用户请求新的功能时，您就可以让他们亲自动手。最近，我一直在着手撰写我的最新著
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
canvasjs无水印版本
07-26
canvasjs无水印版本
canvas烟花canvas烟花canvas烟花
02-12
canvas烟花canvas烟花canvas烟花canvas烟花
html2canvas.js
03-11
在实际使用的时候发现其init方法只是将document转换为了canvas，并没有保存为图片这一步。 所以我在此基础上进行了扩展，可以调用我封装的方法传入需要截取的document以及文件名字，直接将document以图片形式自动...
html2canvas(1.0.0)
02-22
html2canvas改过后的插件
一个小时学习javaScript
weixin_43064364的博客
04-20 919
JavaScript 是一种广泛使用的编程语言，最初被设计来增加网页的交互性，让用户能够与网页上的元素进行互动。自从1995年被引入以来，JavaScript已经发展成为Web开发中不可或缺的一部分，并且其用途已经大大扩展到了网页之外。
vue2---修饰符
最新发布
weixin_45503872的博客
04-24 995
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 578
官网代码（在取消选中状态的时候不生效）
vue 实现级联选择器功能
清音的博客
04-22 490
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图
pblh123的专栏
04-17 1051
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 387
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue3【详解】 vue3 比 vue2 快的原因
朝阳39的博客
04-19 933
vue3使用的 Proxy 在处理属性的读取和写入时，比vue2使用的defineProperty 有更好的性能（速度加倍的同时，内存还能减半！
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 357
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
TK canvas超大图片待放大，缩小功能
04-28
要实现TK Canvas中的超大图片放大和缩小功能，可以通过以下步骤实现： 1. 在Canvas中创建一个Image对象，并使用Canvas.create_image()方法将其添加到Canvas中。 2. 创建一个滚动条Scrollbar对象，并使用Canvas....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值