canvas星空的2d绘制示例

一切尽在注释里:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>star rotate</title>
</head>
<body>
    <canvas id="canvas">
        当前浏览器不支持canvas,请更换浏览器使用
    </canvas>

    <script type="text/javascript">
    window.onload=function(){
        //获取canvas节点
        var canvas=document.getElementById("canvas");

        //设置节点的属性:宽度,高度
        canvas.width=800;
        canvas.height=600;

        //设置绘制模式
        var context=canvas.getContext("2d");
        // context.moveTo(100,100);
        // context.lineTo(400,400);

        //绘制渐变背景的矩形
        var grd=context.createLinearGradient(0,0,0,600);
        //设置渐变点(范围0-1,添加渐变色),在这里我们起始设置为黑色,渐变到墨蓝色
        grd.addColorStop(0,"black");
        grd.addColorStop(1,"#054696");
        //设置填充样式为设置好的渐变模式
        context.fillStyle=grd;
        //使用设置好的模式绘制矩形,在这里的矩形作为背景层
        context.fillRect(0,0,800,600);


        // 在背景层上面绘制200个五角星
        context.fillStyle="yellow";
        for(var i=0;i<200;i++){
            //设置随机半径为3-8
            var R=Math.random()*5+3;
            //设置随机x坐标为10-790
            var x=Math.random()*780+10;
            //设置随机y坐标为6-354
            var y=(Math.random()*580+10)*3/5;
            // 设置随机旋转角度为0-72
            var angle=Math.random()*72;
            //设置五角星路径
            starPath(context,R,x,y,angle);
            //填充五角星路径
            context.fill();
        }
    }

    //建立五角星路径,下面有图示
    function starPath(cxt,R,x,y,angle){
        //beginPath()新建路径
        cxt.beginPath();
        //五角星有10个顶点,循环设置顶点,顶点见图示
        for(var i=0;i<5;i++){

            cxt.lineTo(Math.cos((72*i+angle)*Math.PI/180)*R+x,Math.sin((72*i+angle)*Math.PI/180)*R+y);
            // 在这里使用小圆半径为大圆的一半,两个圆见图示
            cxt.lineTo(Math.cos((72*i+36+angle)*Math.PI/180)*R/2+x,Math.sin((72*i+36+angle)*Math.PI/180)*R/2+y);
        }
        //closePath()闭合路径
        cxt.closePath();
    }

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

下面贴出五角星路径的构造图:

五角星每两个个外顶点和内顶点与中心连线的夹角都为72°,我们引入坐标轴和三角函数进行计算。

每个外顶点坐标为(cos(72*i)*R,sin(72*i)*R)(i=1,2,3,4,5)

每个内顶点在相邻外顶点的基础上偏移36°,

坐标可以这么写(cos(72*i+36)*R,sin(72*i+36)*R)(i=1,2,3,4,5),

也可以这么写(cos(72*i-36)*R,sin(72*i-36)*R)(i=1,2,3,4,5)

因为js中的三角函数是弧度制,角度转弧度的公式为:arc=angle/180*Math.PI

上述即是星空的完整绘制过程。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

在html5时,我用JavaScript封装了一个HTML5的canvas库。

2816
来自专栏IMWeb前端团队

css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

1845
来自专栏糊一笑

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这...

4035
来自专栏CodingBlock

Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解

上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas...

40112
来自专栏偏前端工程师的驿站

CSS3魔法堂:背景渐变(Gradient)

一、前言                               很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认...

47210
来自专栏练小习的专栏

浏览器亚像素渲染与小数位的取舍

在响应式项目中,百分比的数值的应用越来越多,比如栅格化布局、背景定位、内边距等。以往对于这种数值,我们大都是直接采用计算器计算出来的数值。但这种数值有时会很长,...

2015
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

1475
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

2598
来自专栏偏前端工程师的驿站

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

2958
来自专栏老马寒门IT

02-移动端开发教程-CSS3新特性(中)

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

2330

扫码关注云+社区