Canvas小demo(直线和曲线绘制出一个星空，月亮，绿地)

最新推荐文章于 2024-05-29 17:25:33 发布
最新推荐文章于 2024-05-29 17:25:33 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyan1106yan/article/details/52957387
版权

主要包含的知识点：

  1. 直线绘制
  2. 径向渐变(绘制天空井深的情况，由蓝变黑)
  3. 五角星数学知识，点与点之间的角度为72deg。。。
  4. 图形变换与状态保存
  5. 弧线绘制月亮（arc,arcTo）
  6. 贝塞尔曲线绘制绿地(bezierCurveTo)

  7. 线性渐变(绿地颜色从远到近是由深到浅)

    请看完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>星空，月亮</title>
    </head>
    <body>
    <canvas id='canvas' style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
        <script type="text/javascript">
        var canvas = document.getElementById('canvas');
        canvas.width = 1280;
        canvas.height = 800;

        var context = canvas.getContext('2d');

        // context.fillStyle = '#000000';
        /**
         * 绘制一个镜像渐变的天空，从深蓝色到黑色
         */
        var radialGrad = context.createRadialGradient(640,800,0,640,800,800);

        radialGrad.addColorStop(0.0,'#1b0f53');
        radialGrad.addColorStop(1,'#110d25');

        context.fillStyle = radialGrad;


        //直接绘制一个矩形，即代表星空
        context.fillRect(0,0,canvas.width,canvas.height);
        //绘制很多个不同的五角星
        for(var i = 0 ; i <200 ; i++){
            //得到不同大小的圆的半径
            var r = Math.random() * 5 + 5;//获取5~10之间的随机数
            var x = Math.random() * canvas.width;//获取随机的x偏移量,0~画布宽度之间的随机值
            //乘以0.65的意思让星星不会出现在画布高度的0.65下面
            var y = Math.random() * canvas.height * 0.65;
            var rot = Math.random() * 360;//获取角度在0~360度之间的角度
            drawStar(context,x,y,r,rot);

        }
        /**
         * 绘制星空
         */
        function drawStar(cxt,x,y,R,rot){
            cxt.save();

            //进行平移操作
            cxt.translate(x,y);
            //进行旋转操作
            cxt.rotate(rot/180 * Math.PI);
            //使用scale进行缩放，但是为防止对边框宽度进行缩放，就需要将跟边框相关的属性去掉
            cxt.scale(R,R);
            startPath(cxt);

            cxt.fillStyle = '#fb3';
            /*cxt.strokeStyle = '#fb5';
            cxt.lineWidth = 3;
            cxt.lineJoin = 'round';*/

            cxt.fill();
            //cxt.stroke();
            cxt.restore();
        }
        /*绘制单个五角星的函数*/
        function startPath(cxt){
            cxt.beginPath();
            for(var i = 0 ; i<5;i++){
                cxt.lineTo(Math.cos((18 + i * 72)/180 * Math.PI) ,

                                -Math.sin((18 + i * 72) / 180 * Math.PI) );
                    cxt.lineTo(Math.cos((54 + i * 72)/180 * Math.PI) * 0.5,

                                -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 );
            }
        }
        </script>
        <script type="text/javascript">
        /*绘制一轮弯月*/
        /**
         * 弯月外面的弧是一段半圆弧线，使用arc绘制即可
         * 里面是一段弧线，要用arcTo绘制
         */
        /*context.arc(400,400,300,0.5 * Math.PI,1.5 * Math.PI ,true);
        context.moveTo(400,100);
        context.arcTo(1200,400,400,700,(400 - 100)  * dis(1200,400,400,100) /(1200 - 400));
        context.stroke();*/

        //直角三角形求斜边长度
        function dis(x1,y1,x2,y2){
            return Math.sqrt((x1 - x2)*(x1 - x2) + (y1-y2) * (y1-y2));
        }

        /**
         * [fillMoon 绘制带有填充颜色的弯月
         *  在正则的环境下绘制，即以0,0点为圆心，1位半径的环境下绘制，这样的话
         *  控制点d的值也应该在这个范围内进行取值
         *
         * 通过translate(),rotate(),scale()对正则环境下的弯月进行位移，旋转，缩放
         * ]
         * @param  {[type]} cxt       [description]
         * @param  {[type]} d         [arcTo控制点的x坐标]
         * @param  {[type]} x         [弯月的位置]
         * @param  {[type]} y         [弯月的位置]
         * @param  {[type]} R         [弯月的半径]
         * @param  {[type]} rot       [弯月旋转的角度]
         * @param  {[type]} fillColor [用什么颜色填充，可选]
         * @return {[type]}           [description]
         */
        function fillMoon(cxt,d,x,y,R,rot,fillColor){
            cxt.save();

            cxt.translate(x,y);
            cxt.rotate(rot * Math.PI /180);
            cxt.scale(R,R);

            pathMoon(cxt,d);

            cxt.fillStyle = fillColor || '#fd5';
            cxt.fill();

            cxt.restore();
        }

        //以0,0点为圆心，1位半径的单位圆进行路径规划
        function pathMoon(cxt,d){
            cxt.beginPath();

            cxt.arc(0,0,1,0.5 * Math.PI,1.5 * Math.PI ,true);
            cxt.moveTo(0,-1);
            cxt.arcTo(d,0,0,1,dis(d,0,0,-1) /d );

            cxt.closePath();
        }

        fillMoon(context,2,1000,200,100,-10);
    </script>
    <script type="text/javascript">
        /*绘制绿地*/
        drawLand(context);

        function drawLand(cxt){
            cxt.save();

            cxt.beginPath();

            cxt.moveTo(0,600);
            cxt.bezierCurveTo(450,300,500,800,1280,600);
            cxt.lineTo(1280,800);
            cxt.lineTo(0,800);
            cxt.closePath();

            var linearGrad = cxt.createLinearGradient(0,600,0,800);


            linearGrad.addColorStop(0,'#030');
            linearGrad.addColorStop(1,'#580');

            cxt.fillStyle = linearGrad; 
            cxt.fill();

            cxt.restore();
        }
    </script>
    </body>
    </html>
hyxx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android canvas光晕绘制_Unity实现UI光晕效果（发光效果）
weixin_32865081的博客
01-26 507
unity中，我们怎么制作ui物体发光的渐隐渐现的效果呢？比如说我们有一张月亮光晕的精灵图片我们可以给它添加一个canvasgroup组件我们可以发现，组件上的alpha值可以控制图片的透明度，从0到1那么我们可以在代码中通过控制alpha值循环的变化实现发光的光晕效果以下是代码：using system.collections;using system.collections.generic;u...
Android 自定义View:月亮有阴晴圆缺
m0_64420071的博客
04-15 231
实现 先放个椭圆的图，等会会用上辅助讲解实现原理 如果这个 Major axis 的长度等于 Minor axis 的长度，就是一个正圆（知识点还给数学老师了，忘了这两个轴叫什么了 QAQ ） 现在发挥一下想象力，固定 Major axis 修改 Minor axis 的值，这就是一个变化的椭圆，再配合一个半圆，合并后的图形，对一个正圆的遮挡，是不是就变成月有阴晴圆缺了？ 哈哈哈～接下来就是核心代码和注释了。应该都能看懂吧。 override fun onDraw(canvas: Canvas) {
CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)
最新发布
misschengispink的博客
05-29 517
创建一个.html文件，复制代码进去就可以看到效果啦~满屏星星很好看，有普通粒子星星，也有一闪一闪的十字星星，不定时会有流星划过，很好看的夜空，如果想要星星变大，可自行调整粒子大小。
用 Canvas 编织璀璨星空图
熊宗的博客
11-04 1614
先来看看最终的效果： GitHub项目: CyandevToys / ParticleWeb 是不是还蛮酷的呢？本文我们就来一点一点分析怎么实现它！ 分析 首先我们看看这个效果具体有那些要点。首先，这么炫酷的效果肯定是要用到 Canvas 了，每个星星可以看作为一个粒子，因此，整个效果实际上就是粒子系统了。此外，我们可以发现每个粒子之间是相互连接的，只不过离的近的粒子之间的
Canvas之图片文字 进阶篇
xifei66的博客
09-24 963
接着上一篇文章继续学习 1.绘制图片 绘制有两种方法，drawPicture(矢量图) 和 drawBitmap(位图),接下来我们一一了解。 (1)drawPicture 使用Picture前请关闭硬件加速，以免引起不必要的问题！ 使用Picture前请关闭硬件加速，以免引起不必要的问题！ 使用Picture前请关闭硬件加速，以免引起不必要的问题！ 在AndroidMenifest文件中application节点下添上 android:hardwareAccelerated="false"以关闭
Android绘制五角星并实现星星闪耀发光效果
分享技术与经验的博客
11-23 3829
自定义ShiningStarView。通过 `BlurMaskFilter` 实现外发光效果，坐标轴以顶角为原点进行数学计算，得到五角星的`Path`轨迹。根据弧度（1角度=π/180弧度）来计算边长，根据五角星的对称原理和直角三角形的原理，借助sin和cos等公式计算对应坐标。通过动画进行循环绘制，绘制不同的透明度实现闪闪发光效果。
微信小程序demo：利用canvas绘制折线图
03-15
开始绘制折线图时，从第一个点开始，用`beginPath`开启一个新的路径，然后用`moveTo`移动到起点，接着用`lineTo`连接各个数据点。每个点之间用`stroke`方法画出线段。为了增加交互性，可以为每个点添加鼠标悬停时的...
微信小程序学习用demo：使用canvas绘制雷达图
03-15
在这个“微信小程序学习用demo：使用canvas绘制雷达图”项目中，我们将探讨如何利用微信小程序的框架和HTML5的Canvas API来创建一个动态的雷达图。 首先，微信小程序的开发涉及的主要知识点包括： 1. **微信小程序...
canvas绘制的直线动画
08-31
Canvas是一个非常强大的图形绘制工具，允许开发者在网页上动态绘制图形，包括动画效果。以下是对给定示例代码的详细解释： 首先，HTML部分设置了Canvas元素，并通过CSS进行了一些基本样式设置，使其居中显示并设置...
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行动态图形绘制，创造出丰富的视觉效果。本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要...
小程序利用Canvas绘制图片和竖排文字
03-29
闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让...先来看一下 wxml 里面的代码，主要是放了一个 canvas 标签，
HTML5 canvas全屏酷炫星空背景动画特效
09-08
HTML5 canvas全屏酷炫星空背景动画特效
三种canvas星空背景效果
别人笑我太疯癫，我笑他人看不穿。
11-07 2830
【代码】两种canvas星空背景效果。
『 canvas 特效』一文教你绘制绚丽的星空背景 TS + ES6
发果叁
12-20 1661
很久没有写关于canvas效果的文章了，刚好最近又学到了一个新的特效，使用canvas绘制多层次动态星空背景，今天就分享给大家。首先我们依旧来看一下最终实现的效果，如图所示：由于录制GIF造成失帧，因此图片可能看不出完整的动画，完整的效果及代码可以拉到文章最底部来进行观赏。在上图中可以简单的看出有层次的星空图在不断的变换，一会儿向右移动，一会儿又向左移动，最后还会进行旋转，那么这样的效果是如何实现的呢？咱们就一起来学习一下吧！
基于canvas画布的星空效果
热门推荐
测试猫
12-01 1万+
canvas是html5的新标签，其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的，所以呢为了特效肯定是牺牲一定的兼容性。这里呢，分享一个基于canvas开发的浩瀚星河插件，其实这个源代码是网上下载的，我把它整合了一下，重新封装一些参数提供更多的可改项。 首先引入两个javascript脚本，一个是jquery插件，另一个是封装好的cosmos_canvas.js H
canvas 实现一片星空
Lucky_ze的博客
03-25 254
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> </style> </head> <body> <canvas id="canva...
使用Canvas绘制动态星空
浅笑醉红楼
01-24 363
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。
canvas绘制星空（起手篇）
风舞红枫的个人博客
03-05 976
canvas绘制星空（起手篇）
Canvas星空效果（JS面向对象）
前端向朔
04-17 7449
概述 更多Canvas实例可以看GitHub，不定时更新：https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论： 1.HTML5 canvas的基础API，如 context.beginPath(); 2.获取屏幕大小，并响应窗口大小变化 3.JS面向对象 先看效果 Canvas星空效果 See the Pe...
小程序canvas曲线和直线
04-29
小程序的canvas API可以绘制曲线和直线，具体可以参考以下示例代码： 绘制曲线： ```javascript // 获取canvas绘图上下文 const ctx = wx.createCanvasContext('myCanvas') // 设置起点 ctx.moveTo(50, 200) // 绘制二次贝塞尔曲线 ctx.quadraticCurveTo(150, 50, 250, 200) // 设置线条颜色和宽度 ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2) // 绘制曲线 ctx.stroke() // 绘制起点和控制点 ctx.beginPath() ctx.arc(50, 200, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.arc(150, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() // 绘制终点和控制点 ctx.beginPath() ctx.arc(250, 200, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.moveTo(150, 50) ctx.lineTo(250, 200) ctx.setStrokeStyle('#0000ff') ctx.setLineWidth(1) ctx.stroke() // 绘制文字 ctx.setFontSize(20) ctx.setFillStyle('#000000') ctx.fillText("Quadratic Curve", 100, 250) // 绘制完成 ctx.draw() ``` 绘制直线： ```javascript // 获取canvas绘图上下文 const ctx = wx.createCanvasContext('myCanvas') // 设置起点 ctx.moveTo(50, 50) // 绘制直线 ctx.lineTo(250, 50) // 设置线条颜色和宽度 ctx.setStrokeStyle('#ff0000') ctx.setLineWidth(2) // 绘制直线 ctx.stroke() // 绘制起点和终点 ctx.beginPath() ctx.arc(50, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() ctx.beginPath() ctx.arc(250, 50, 3, 0, 2 * Math.PI) ctx.setFillStyle('#0000ff') ctx.fill() // 绘制文字 ctx.setFontSize(20) ctx.setFillStyle('#000000') ctx.fillText("Line", 100, 100) // 绘制完成 ctx.draw() ``` 以上示例代码中，`wx.createCanvasContext('myCanvas')`表示获取canvas绘图上下文，其中'myCanvas'为canvas组件的id。`ctx.moveTo(x, y)`表示设置起点，`ctx.lineTo(x, y)`表示绘制直线，`ctx.quadraticCurveTo(cpx, cpy, x, y)`表示绘制二次贝塞尔曲线。`ctx.setStrokeStyle(color)`和`ctx.setLineWidth(width)`分别设置线条颜色和宽度。`ctx.beginPath()`和`ctx.arc(x, y, r, startAngle, endAngle)`表示绘制圆形起点、终点和控制点。`ctx.setFillStyle(color)`设置填充颜色。`ctx.fillText(text, x, y)`表示绘制文字。`ctx.draw()`表示绘制完成。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值