【Canvas技法】绘制绘制正五边形、正五角星

已于 2024-09-22 13:59:13 修改
阅读量850 收藏 18
点赞数 15
分类专栏： 技法 文章标签： html5 canva可画
于 2024-04-15 13:20:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/137777289
版权

【图例】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>绘制正五边形、正五角星</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body οnlοad="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
            <img id="myImg" src="125.png" style="display:none;"/>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
const HEIGHT=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=WIDTH;
    canvas.height=HEIGHT;

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){

    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){
        
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏        
    
        // 画正五边形
        drawPentagon(ctx,-128,-128,100);
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();

        // 画正五角星
        draw5Star(ctx,-128,128,100);
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();

        // 画顶顶有连线的正五角星
        draw5Star2(ctx,128,-128,100);
        ctx.fillStyle="RGB(215,204,182)";
        ctx.fill();
        ctx.lineWidth=2;
        ctx.strokeStyle="RGB(104,20,20)";
        ctx.stroke();

        // 画立体感五角星
        var arr=createSolid5StarArr(128,128,100);        
        for(var i=0;i<arr.length;i+=4){
            ctx.beginPath();
            ctx.lineTo(arr[i].x,arr[i].y);
            ctx.lineTo(arr[i+2].x,arr[i+2].y);
            ctx.lineTo(arr[i+3].x,arr[i+3].y);
            ctx.closePath();
            ctx.lineWidth=1;
            ctx.strokeStyle="black";
            ctx.stroke();
            ctx.fillStyle="yellow";
            ctx.fill();

            ctx.beginPath();
            ctx.lineTo(arr[i+1].x,arr[i+1].y);
            ctx.lineTo(arr[i+2].x,arr[i+2].y);
            ctx.lineTo(arr[i+3].x,arr[i+3].y);
            ctx.closePath();
            ctx.lineWidth=1;
            ctx.strokeStyle="black";
            ctx.stroke();
            ctx.fillStyle="red";
            ctx.fill();
        }
        

        // 版权
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "8px consolas";
        ctx.fillStyle="black";
        ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);
    }

    // 画前景
    this.paintFg=function(ctx){
        
        
    }
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*--------------------------------------------------
函数:绘制正五边形
ctx:绘图上下文
x:正五边形中心横坐标
y:正五边形中心纵坐标
r:正五边形中心到顶点的距离
---------------------------------------------------*/
function drawPentagon(ctx,x,y,r){
    ctx.beginPath();
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2-Math.PI/10;
        var x1=r*Math.cos(theta)+x;
        var y1=r*Math.sin(theta)+y;
        ctx.lineTo(x1,y1);
    }
    ctx.closePath();
}

/*--------------------------------------------------
函数:绘制正五角星的推荐画法
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star(ctx,x,y,R){
    var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);
    
    var arr=[0,0,0,0,0,0,0,0,0,0];

    // 顶五点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2-Math.PI/10;
        var x1=R*Math.cos(theta)+x;
        var y1=R*Math.sin(theta)+y;
        arr[i*2]=createPt(x1,y1);
    }

    // 内五点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2+Math.PI/10;
        var x1=r*Math.cos(theta)+x;
        var y1=r*Math.sin(theta)+y;
        arr[i*2+1]=createPt(x1,y1);
    }

    ctx.beginPath();
    for(var i=0;i<arr.length;i++){
        ctx.lineTo(arr[i].x,arr[i].y);
    }
    ctx.closePath();
}

/*--------------------------------------------------
函数:绘制正五角星的第二种画法，只适合填充，不宜描边
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
r:五角星中心到顶点的距离
---------------------------------------------------*/
function draw5Star2(ctx,x,y,r){
    ctx.save()
    ctx.translate(x-r,y-r);    
    ctx.beginPath();
    ctx.moveTo(r, 0);
    ctx.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
    ctx.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
    ctx.lineTo(r, 0);
    ctx.closePath();
    ctx.restore();
}

/*--------------------------------------------------
函数:返回立体感正五角星的数组，需要在外面进行填充/描边
ctx:绘图上下文
x:五角星中心横坐标
y:五角星中心纵坐标
R:五角星中心到顶点的距离
---------------------------------------------------*/
function createSolid5StarArr(x,y,R){
    var r=R*Math.sin(Math.PI/10)/Math.sin(Math.PI/10*7);
    
    var arr=[0,0,0,createPt(x,y),
             0,0,0,createPt(x,y),
             0,0,0,createPt(x,y),
             0,0,0,createPt(x,y),
             0,0,0,createPt(x,y)];

    // 顶十点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2-Math.PI/10;
        var x1=R*Math.cos(theta)+x;
        var y1=R*Math.sin(theta)+y;
        arr[i*4]=createPt(x1,y1);

        theta=(i+1)*Math.PI/5*2-Math.PI/10;
        x1=R*Math.cos(theta)+x;
        y1=R*Math.sin(theta)+y;
        arr[i*4+1]=createPt(x1,y1);
    }

    // 内五点
    for(var i=0;i<5;i++){
        var theta=i*Math.PI/5*2+Math.PI/10;
        var x1=r*Math.cos(theta)+x;
        var y1=r*Math.sin(theta)+y;
        arr[i*4+2]=createPt(x1,y1);
    }

    return arr;
}

/*--------------------------------------------------
生活就是如此，
我们很多人有压在心底的痛苦，
不能向别人述说。
每当夜深人静，
自己如同躲在阴暗角落的小猫咪，
总会翻出血淋淋的伤口，
自行抚慰舔舐。
---------------------------------------------------*/
//-->
</script>

END

普兰店拉马努金
关注
专栏目录
canvas绘制五角星
xm2by的博客
02-18 5240
canvas绘制五角星 在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示： 这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。 当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为...
canvas绘制不同样式的五角星（图文示例）
大剑师兰特的GIS世界
01-18 1594
如何使用canvas绘制不同样式的五角星呢？这里面要确定每个五角星围绕中心点的角度是72度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的五角星。
有手就行, Harmonyos鸿蒙ArkTS自定义View实现五星红旗效果
最新发布
肤浅失眠中
10-08 312
​ 前面我们讲过几期鸿蒙自定义View 的教程，赶着现在国庆，周边到处都是挂满的过期，咋们也来出一期鸿蒙自定义View实现五星红旗的教程首先，我们特别需要注意的是 五星红旗 在。其要点大概是：宽与高之比为3比2，五颗星都在左上四分之一小矩形内，最大星直径约为高的十分之一，四个小五解星的一个角要指向大五角星的中心。
利用Canvas实现绘图功能（绘制五角星）
琉璃轻纱的博客
05-15 5357
要求 利用Canvas编程实现在屏幕上随机位置绘制10个随机大小（边长为20-100dp）的五角星。 过程 一、绘制五角星 首先要解决的问题就是绘制五角星，有了五角星 才能谈其他的，绘制五角星有很多种办法，可以利用圆，可以用线段旋转等等。这里用简单的方式即用canvas实现线段的绘制，并通过线段的选转来实现五角星的绘制，话不多说 上代码： canvas.drawLine(1, 5,7, 5, paint); canvas.translate(1, 5); canvas.rotate(36); can
如何用canvas绘制五角星
radation的博客
12-29 1013
canvas绘制五角星
canvas笔记-画一个五角星（含算法）
IT1995的博客
05-31 2968
算法如下： 上面的图是正三角形： 说下算法，关于上面那些x，y是怎么算出来的。 这里大圆的5个顶点，每个顶点占用的角度为360/5 = 72度，左边那个18度是通过90 - 72 = 18度。 大圆半径为R，所以 x为cos(18度) * R y为-sin(18度) * R 这个负是因为坐标y，是因为向下为正。 其他角度通过加72度就可以了！ 下面来看下那个54度是怎么算的！ 72 * 2 - 90 = 54度，同样半径为r x为cos(54度) * r y为-sin(54.
使用HTML Canvas绘制五角星(一)
qq_35322029的博客
03-15 608
HTML Canvas绘制五角星 HTML Canvas绘制五角星思路整理
js+canvas绘制五角星的方法
10-22
本篇文章将深入探讨如何使用JavaScript调用Canvas API来绘制五角星。五角星的绘制涉及到数学原理，尤其是三角函数，如正弦和余弦，以及循环和路径构建。 首先，我们需要一个HTML页面，其中包含一个`<canvas>`元素，...
Canvas绘制正五边形雷达图
12-28
本教程将深入探讨如何利用Canvas API绘制一个正五边形的雷达图。 首先，我们需要在HTML文件中创建一个Canvas元素，并设置其ID以便于在JavaScript中引用： ```html <!DOCTYPE html> <title>Canvas雷达图 ...
HTML5 canvas基本绘图之绘制五角星
09-27
以下是如何使用CanvasRenderingContext2D对象绘制五角星的示例代码： ```javascript // 获取canvas DOM对象 var canvas = document.getElementById("canvas"); // 获取2D渲染上下文 var context = canvas....
使用canvas画线，位移，旋转，绘制五角星。
09-29
这个教程将带你了解如何利用Canvas进行基本的绘图操作，包括画线、位移和旋转，以及如何巧妙地绘制出五角星图案。无需复杂的数学计算，只需理解Canvas的基本变换原理，你就可以轻松实现这一目标。 首先，Canvas提供...
Canvas中绘制五角星
weixin_51098806的博客
03-24 534
代码： from tkinter import * import math as m root = Tk() w = Canvas(root,width=200,height=100) w.pack() x = 100 y = 50 r = 50 points = [ #左上点 x - int(r * m.sin(2 * m.pi / 5)), y - int(r * m.cos(2 * m.pi / 5)), #右上点
canvas -- 画一个五角星
qq_44867271的博客
06-11 555
首先可以用把每个点的坐标全部写出来的傻瓜方法，这里就不作详解 来看看结合高中数学知识的方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画五角星</title> </head> <body> <canvas id="canvas" style="display: block; margin: 50px auto
【Html5每日练习】canvas五彩缤纷的五角星
boia
04-14 5300
貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~ 不过计算出来后还是有一点小小的错误，有两条边有点误差，大家就凑合看吧，不要见怪 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //创建
Canvas 绘制不同样式的六角星
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-12 833
通过这些示例，你应该能更好地理解如何使用 Canvas 进行图形绘制，并且可以根据自己的需要进行扩展和修改。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过调整颜色、大小和位置，可以创造出各种不同的效果。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，我们首先定义一个函数来计算六角星的顶点坐标。我们可以改变颜色、填充样式以及描边样式来创建不同的视觉效果。接下来，我们可以利用这些坐标来绘制六角星。
HTML5 Canvas 绘制五角星
weixin_33786077的博客
11-09 917
代码： <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>五角星</title>...
canvas 制作星星
yin_you_yu的博客
01-22 362
function Star(x, y, rotation) { this.x = x; this.y = y; this.length = 15; this.scaleX = 1; this.scaleY = 1; this.rotation = rotation; this.angle = Math.random() * 360; this.vx = 0; this.vy =...
canva五角星空html,使用canvas绘制一个五角星
weixin_36259655的博客
06-25 1072
一、了解canvascanvas 是HTML5新增的元素，用于在网页上绘制图形。但 canvas 只是图形的容器，必须要通过脚本(通常是JavaScript)来绘制图形。可以通过多种方法使用canvas标签来绘制路径、盒、圆、字符及添加图像等。 与 标签间插入的内容是供不支持 canvas 元素的浏览器显示的，可以用来做兼容，例如：您的浏览器暂时不支持canvas，请升级或更换您的浏览器！复制代码...
canvas绘制五角星详细过程
weixin_30576827的博客
06-22 1010
canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document.getElementById('straight'); var context = canvas.getContext('2d'); </script> 不管是绘制矩...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值