【Canvas与艺术】椭圆形五星环绕Premium Quality标志

已于 2024-04-11 20:51:31 修改
阅读量742 收藏 5
点赞数 19
分类专栏： 艺术 文章标签： html5 canva可画
于 2024-04-11 14:33:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/137638492
版权

【关键点】

绘制此标志最难在星星之间间隔整齐，我目前用的是类似四心定位法，用四条圆弧去拟近一个椭圆，这种方法需要不断调试，比较费工。

【成品】

 【代码】 

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>椭圆Premium Quality标志</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);// 清屏    

        // 外椭圆
        ctx.beginPath();
        drawTuoYuan(ctx,0,0,422,284);
        ctx.closePath();
        ctx.lineWidth=8;
        ctx.strokeStyle="rgb(0,0,137)";
        ctx.stroke();
        ctx.fillStyle="white";
        ctx.fill();


        /* 上半圈 */
        for(var i=0;i<=96;i++){
            var theta=Math.PI*5/4+Math.PI/2/96*i;
            var x=250*Math.cos(theta);
            var y=250*Math.sin(theta)+125;

            if(i%4==0){
                draw5Star(ctx,x,y,10,"rgb(0,0,137)");
            }
        }

        /* 下半圈 */
        for(var i=0;i<=96;i++){
            var theta=Math.PI*1/4+Math.PI/2/96*i;
            var x=250*Math.cos(theta);
            var y=250*Math.sin(theta)-125;

            if(i%4==0){
                draw5Star(ctx,x,y,10,"rgb(0,0,137)");
            }
        }

        /* 右半圈 */
        for(var i=1;i<24;i++){
            var theta=-Math.PI*1/4+Math.PI/2/24*i;
            var x=70*Math.cos(theta)+124;
            var y=70*Math.sin(theta);

            if(i%4==0){
                draw5Star(ctx,x,y,10,"rgb(0,0,137)");
            }
        }
        
        /* 左半圈 */
        for(var i=1;i<24;i++){
            var theta=Math.PI*3/4+Math.PI/2/24*i;
            var x=70*Math.cos(theta)-124;
            var y=70*Math.sin(theta);

            if(i%4==0){
                draw5Star(ctx,x,y,10,"rgb(0,0,137)");
            }
        }

        // 内椭圆
        ctx.beginPath();
        drawTuoYuan(ctx,0,0,350,214);
        ctx.closePath();
        ctx.lineWidth=3;
        ctx.strokeStyle="rgb(0,0,137)";
        ctx.stroke();

        // 上方PREMIUM QUALITY
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "20px 微软雅黑";
        ctx.fillStyle="rgb(0,0,137)";
        ctx.fillText("PREMIUM QUALITY",0,-60);

        // 上分隔线
        ctx.beginPath();
        ctx.moveTo(-130,-50);
        ctx.lineTo(130,-50);
        ctx.lineWidth=1.5;
        ctx.strokeStyle="rgb(0,0,137)";
        ctx.stroke();

        // 中心文字
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "40px 微软雅黑";
        ctx.fillStyle="rgb(0,0,137)";
        ctx.fillText("MADE IN SERICE",0,24);

        // 下分隔线
        ctx.beginPath();
        ctx.moveTo(-130,50);
        ctx.lineTo(130,50);
        ctx.lineWidth=1.5;
        ctx.strokeStyle="rgb(0,0,137)";
        ctx.stroke();

        // 下方PREMIUM QUALITY
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "20px 微软雅黑";
        ctx.fillStyle="rgb(0,0,137)";
        ctx.fillText("PREMIUM QUALITY",0,85);

        // 作者
        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){
                
    }
}

/*------------------------------------------------------------------------
 函数：drawEllipse函数的套娃函数
     ctx：绘图上下文
 x:椭圆中心点横坐标
 y:椭圆中心点纵坐标
 width：椭圆宽
 height：椭圆高
------------------------------------------------------------------------*/
function drawTuoYuan(ctx,x,y,width,height){
    drawEllipse(ctx,x-width/2,y-height/2,width,height);
}

/*------------------------------------------------------------------------
 函数：使用贝塞尔三次曲线拟近椭圆，
        该方法比原生的ellipse函数消耗小很多。
 ctx：绘图上下文
 x:椭圆左极点横坐标(注意不是中心点)
 y:椭圆左极点纵坐标(注意不是中心点)
 width：椭圆宽
 height：椭圆高
 注：该方法摘录自 张磊著《HTML5实验室-Canvas世界》，电子工业出版社出版
------------------------------------------------------------------------*/
function drawEllipse(ctx,x,y,width,height){
    var k=0.55228475;
    var ox=(width/2)*k;
    var oy=(height/2)*k;
    var xe=x+width;
    var ye=y+height;
    var xm=x+width/2;
    var ym=y+height/2;

    ctx.beginPath();
    ctx.moveTo(x,ym);
    ctx.bezierCurveTo(x,ym-oy,xm-ox,y,xm,y);
    ctx.bezierCurveTo(xm+ox,y,xe,ym-oy,xe,ym);
    ctx.bezierCurveTo(xe,ym+oy,xm+ox,ye,xm,ye);
    ctx.bezierCurveTo(xm-ox,ye,x,ym+oy,x,ym);
    ctx.closePath();
}

// 画实心五角星的函数
function draw5Star(ctx,x,y,r,color){
    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.fillStyle=color;
    ctx.fill();
    ctx.restore();
}

/*--------------------------------------------------------
老百姓一身债，企业一身债，各地城投也一身债，
钱都去哪儿了？
有人说：“喝茶叶需要钱，润出去需要钱，买加拿大大House更需要钱！
当你开始深入思考这个问题的时候，就已经走上犯罪道路了......”
---------------------------------------------------------*/
//-->
</script>

【原图】

 

 【四心法绘制椭圆的示意图】

END

普兰店拉马努金
关注
  • 19
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
字典查询（部分）
myth_HG的专栏
05-28 14万+
#include #include #include using namespace std; const int enMax=46; const int chMax=256; const int attrMax = 66; const int spaceMax = 100; const int inputMax = 30; char atrrSum[13][attrMax]= {"n.","
js+html5实现canvas绘制椭圆形图案的方法
10-22
主要介绍了js+html5实现canvas绘制椭圆形图案的方法,涉及html5图形绘制的基础技巧,感兴趣的朋友可以参考一下
用C语言写一个查单词的小demo
m0_47068593的博客
07-03 4万+
用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1
网络编程_8(项目附件)
weixin_38717634的博客
01-13 3万+
dict.txt abandonment n.放弃 abbreviation n.缩写 abeyance n.缓办，中止 abide v.遵守 ability n.能力 able adj.有能力的，能干的 abnormal adj.反常的，变态的 aboard adv.船(车)上 abolish v.废除，取消 abolition n.废除，取消 abortion n.流产 abortive adj.无效果的，失败的 about prep.关于，大约 ab
简单英译汉SQL脚本
热门推荐
shencomd的专栏
10-19 19万+
create table t_dictionary(word varchar(200), trans varchar(1000)); insert into t_dictionary values('abandon','v.抛弃，放弃'); insert into t_dictionary values('abandonment','n.放弃'); insert into t_dictionary
微信小程序canvas实现椭圆（圆形）缩放
01-09
本示例专注于使用Canvas绘制椭圆（圆形）并实现其缩放功能。以下将详细讲解实现这个功能所需的知识点： 1. **Canvas API**： 微信小程序中的Canvas组件提供了与HTML5 Canvas相似的API，允许开发者进行像素级别的...
微信小程序canvas实现椭圆（圆形）元素自由移动
01-09
本文将深入探讨如何使用Canvas在微信小程序中实现椭圆（圆形）元素的自由移动。 首先，我们需要了解Canvas的基本用法。在微信小程序中，Canvas组件通过`<canvas>`标签引入，并通过`wx.createSelectorQuery()`获取...
JavaScript canvas绘制圆弧与圆形
10-15
主要为大家详细介绍了JavaScript canvas绘制圆弧与圆形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5 Input 验证身份证
cuisidong1997的博客
07-14 374
对于验证身份证号码，我们可以使用"type"属性为"text"的input元素，并通过"pattern"属性来指定验证的正则表达式。在许多网站或应用程序中，我们常常需要验证用户输入的身份证号码的有效性。本文将介绍如何使用HTML5的input元素来验证身份证号码，并提供相应的代码示例。通过使用HTML5的input元素和正则表达式，我们可以方便地验证用户输入的身份证号码的有效性。在本文中，我们介绍了身份证号码的正则表达式，并提供了相应的代码示例。身份证号码的格式包括18位和15位两种。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
最新发布
m0_62996549的博客
07-18 100
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
html5——表单
jiuyuexixi的博客
07-10 1332
html5——表单
探索HTML5的设计原则：引领Web开发的未来方向
s8305057的博客
07-09 701
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。
计算机三级PC专业技术.doc
07-18
计算机
“人力资源+大数据+薪酬报告+涨薪调薪”
07-18
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
健康产业商业模式研究大纲-医疗器械-迪安诊断.docx
07-18
健康产业商业模式研究大纲-医疗器械-迪安诊断
计算机期末考试题.doc
07-18
计算机
产品经理面试常见问题及答案
07-18
常见面试问题及答案
Android Canvas 画一个宽 90 高20的 圆角椭圆形
05-31
好的，以下是画一个宽为90，高为20的圆角椭圆形的代码： ```java // 创建一个Bitmap对象 Bitmap bitmap = Bitmap.createBitmap(90, 20, Bitmap.Config.ARGB_8888); // 创建一个Canvas对象 Canvas canvas = new Canvas(bitmap); // 创建一个Paint对象 Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.RED); // 创建一个RectF对象 RectF rectF = new RectF(0, 0, 90, 20); // 画圆角矩形 canvas.drawRoundRect(rectF, 10, 10, paint); ``` 解释一下代码： 首先，我们创建一个Bitmap对象，并指定宽为90，高为20。然后，我们创建一个Canvas对象，将Bitmap对象传入，这样我们就可以在这个Bitmap上进行绘制了。 接着，我们创建一个Paint对象，并设置抗锯齿和颜色。抗锯齿可以让图形边缘更加平滑，颜色可以根据自己的需求设置。 然后，我们创建一个RectF对象，指定圆角矩形的位置和大小。最后，我们调用Canvas的drawRoundRect方法，传入RectF对象和圆角的大小，即可画出一个圆角矩形。 注意，以上代码只是画出了一个圆角矩形，如果需要把它变成圆角椭圆形，只需要将RectF的高度设置得比宽度小即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值