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

【关键点】

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

【成品】

 【代码】 

<!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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/534471.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DCDC 5V2A电源升压芯片FP6276BXR-G1 FP6298XR-G1

DCDC 5V2A电源升压芯片FP6276BXR-G1 FP6298XR-G1

一、FP6276BXR-G1 3.7v升5V2A同步升压输入电压:2.4V-4.5V FP6276B是一个具有PWM/PSM控制的电流模式增压直流-直流转换器。它的PWM电路内置40mΩ高侧开关和40mΩ低侧开关使该调节器高高效。内部补偿网络还将外部组件计数最小化到只有6个。一个内部的0.6V电压被连接到误差放大器…
阅读更多...
你知道 Java 线程池的原理吗？

你知道 Java 线程池的原理吗？

Java线程池是用于管理和复用线程的机制&#xff0c;它可以帮助开发者有效地管理线程的生命周期和资源&#xff0c;并提高应用程序的性能和稳定性。 1. 线程池概述 在计算机科学中&#xff0c;线程池是一种可用来执行异步任务的线程队列。它主要包含以下几个组成部分&#xff…
阅读更多...
【YOLOv8】Yolov5和Yolov8网络结构的分析与对比

【YOLOv8】Yolov5和Yolov8网络结构的分析与对比

目录 一 YOLOv5 二 YOLOv8 yolo通常采用backbone-neck-head的网络结构。 Backbone 主要负责从输入图像中提取高层次的语义特征,常包含多个卷积层和池化层&#xff0c;构建了一个深层次的特征提取器。Neck通常用来进一步整合与调整backbone提取的特征&#xff0c;有利于将不同…
阅读更多...
计算机网络——WEB服务器编程实验

计算机网络——WEB服务器编程实验

实验目的 1. 处理一个 http 请求 2. 接收并解析 http 请求 3. 从服务器文件系统中获得被请求的文件 4. 创建一个包括被请求的文件的 http 响应信息 5. 直接发送该信息到客户端 具体内容 一、C 程序来实现 web 服务器功能。 二、用 HTML 语言编写两个 HTML文件&#xff0c;并…
阅读更多...
深入OceanBase内部机制：系统架构与组件精讲

深入OceanBase内部机制：系统架构与组件精讲

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 1️⃣OceanBase 整体架构1.1 分区1.2 分片1.3 日志流1.4 对等节点1.5 多租户 2️⃣OceanBase 架构与组件详解2.1 存储层2.2 …
阅读更多...
错误日志：解决在VScode中调试C++代码断点无效、断点错位的问题

错误日志：解决在VScode中调试C++代码断点无效、断点错位的问题

问题可能原因有&#xff1a; 调试时断点无效&#xff0c;大概率是 CMakeLists.txt 设置成了 Release 模式&#xff1b;如果在 CMakeLists.txt 在设置成 Debug 以后&#xff0c;调试时能够停下来&#xff0c;但没在断点处停下&#xff0c;而是停在了别的地方&#xff0c;这就是…
阅读更多...
解决solidworks electrical无法连接数据库

解决solidworks electrical无法连接数据库

很多人在第一次安装电气软件的过程中&#xff0c;会遇到这样的一个问题&#xff1a;“无法连接至数据库&#xff0c;请检查连接参数”&#xff0c;相信很多人看到就感到非常的头疼。的确&#xff0c;对于我们专业人士来说&#xff0c;也是非常的难受&#xff0c;那怎么办呢&…
阅读更多...
计算机毕业设计vue+PHP校园二手书交易系统_ij5dr

计算机毕业设计vue+PHP校园二手书交易系统_ij5dr

开发语言&#xff1a;php 后端框架&#xff1a;Thinkphp/Laravel 前端框架&#xff1a;vue.js 服务器&#xff1a;apache 数据库&#xff1a;mysql 运行环境:phpstudy/wamp/xammp等 基于vue框架的二手图书交易系统为当前传统管理模式提供了一个高效、便捷、信息化的解决方案&a…
阅读更多...
【热门话题】OneFlow深度学习框架介绍

【热门话题】OneFlow深度学习框架介绍

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 OneFlow深度学习框架介绍引言一、OneFlow概述1.1 定位与起源1.2 核心特性数据流…
阅读更多...
TQZC706开发板教程：在ZC706上运行AD9361

TQZC706开发板教程：在ZC706上运行AD9361

首先需要在github上下载两个文件&#xff0c;本例程用到的文件以及最终文件&#xff0c;我都会放在网盘里面&#xff0c;地址在本文的末尾&#xff0c;需要自行提取 在github上搜索hdl选择第一个-->选择版本-->我所使用的vivado是2018.3版本&#xff0c;所以这里我下载的…
阅读更多...
JAVA面试八股文之数据库

JAVA面试八股文之数据库

MySQL面试题 MySQL 存储引擎架构了解吗&#xff1f;CHAR 和 VARCHAR 的区别是什么&#xff1f;索引是越多越好嘛&#xff1f;MySQL数据库中空值&#xff08;null&#xff09;和空字符串&#xff08;&#xff09;的区别&#xff1f;SQL 中 on 条件与 where 条件的区别&#xff1…
阅读更多...
【Linux系列】如何确定当前运行的是 RHEL 9 还是 RHEL 8？

【Linux系列】如何确定当前运行的是 RHEL 9 还是 RHEL 8？

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
mysql8主从配置报错Authentication plugin ‘caching_sha2_password‘ reported error

mysql8主从配置报错Authentication plugin ‘caching_sha2_password‘ reported error

错误信息&#xff1a; Error connecting to source slave192.168.2.177:3306. This was attempt 2/86400, with a delay of 60 seconds between attempts. Message: Authentication plugin caching_sha2_password reported error: Authentication requires secure connection.…
阅读更多...
C/C++的内存管理

C/C++的内存管理

栈帧最主要的作用就是存储局部数据 C语言中动态内存管理方式 C语言动态内存管理 该篇详细的讲述了C语言动态内存管理的使用&#xff0c;不太懂的小伙伴可以去了解一下 C中动态内存管理方式 首先&#xff0c;C语言内存管理的方式在C中可以继续使用。但有些地方就无能为力而且使用…
阅读更多...
谷歌浏览器网页自动刷新插件

谷歌浏览器网页自动刷新插件

谷歌浏览器网页自动刷新插件下载&#xff1a;https://www.123pan.com/s/f43eVv-CO7Kd.html 效果图&#xff08;win和mac系统同样操作&#xff09; 1.打开谷歌浏览器&#xff0c;点击头像旁边的三点&#xff0c;点击扩展程序&#xff0c;点击管理扩展程序。 2.打开开发者模式&a…
阅读更多...
【SpringBoot】配置swagger

【SpringBoot】配置swagger

pom.xml 安装插件 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version></dependency>创建swagger配置类 import org.springframework.context.annotation.…
阅读更多...
韩顺平Java | C24 MySQL数据库(下)

韩顺平Java | C24 MySQL数据库(下)

※多表查询 笛卡尔集&#xff1a;查询两个表&#xff0c;默认无条件情况下&#xff0c;取出第一张表中的每一条记录和第二张表的每一条记录进行组合&#xff0c;返回row1*row2条记录数&#xff0c;包含两张表的所有列 内连接 # 写出正确的过滤条件&#xff1a;多表查询条件不…
阅读更多...
Jackson配置处理LocalDateTime、LocalDate等java8时间类型失效的问题解决

Jackson配置处理LocalDateTime、LocalDate等java8时间类型失效的问题解决

目录 前言 一、问题排查过程 1.1 SpringMvc是如何处理请求报文和响应报文 1.2 JacksonConfig配置排查 二、导致Jackson配置失效的原因 2.1 没有addSerializer 2.2 添加了EnableMvc注解 2.3 另外有地方配置了Jacksonhttpconver覆盖了配置 总结 前言 上一篇文章《使用Ja…
阅读更多...
SpringBoot 整合RocketMQ

SpringBoot 整合RocketMQ

目录 一、引入依赖 二、配置文件 三、生产者 四、消费者 五、结果 一、引入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.0</version> </d…
阅读更多...
Flutter - flutter_gen 资源管理

Flutter - flutter_gen 资源管理

引言&#xff1a; 在开发 Flutter 应用时&#xff0c;我们经常需要使用各种静态资源&#xff0c;如图片、字体和音频等。如何有效地管理和加载这些资源呢&#xff1f;本篇博客将以图片为例带你解密 Flutter 项目中是如何管理资源地。 assets 加载资源 具体文件名引入 在工程…
阅读更多...
最新文章

Copyright @ 2022~2023