【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.theta+=Math.PI/180;
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
        
        // 径向渐变背景
        var rgnt=ctx.createRadialGradient(0,0,0,0,0,256);
        rgnt.addColorStop(0,"rgb(80,80,80)");
        rgnt.addColorStop(1,"rgb(40,40,40)");
        ctx.fillStyle=rgnt;
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);

        // 外缘
        var arr=createWaveCircleArray(96,180,12);
        ctx.beginPath();
        for(var j=0;j<arr.length-2;j+=2){
            var pt1=arr[j];
            var pt2=arr[j+1];// 控制点
            var pt3=arr[j+2];            
            ctx.lineTo(pt1.x,pt1.y);
            ctx.quadraticCurveTo(pt2.x,pt2.y,pt3.x,pt3.y);
        }
        ctx.closePath();
        ctx.fillStyle="white";
        ctx.fill();
    
        // 黑圈
        ctx.beginPath();
        ctx.arc(0,0,164,0,Math.PI*2,false);
        ctx.closePath();
        ctx.lineWidth=2;
        ctx.strokeStyle="black";
        ctx.stroke();

        // 点圈
        for(var i=0;i<180;i++){
            var theta=i*Math.PI/90;
            var x=159*Math.cos(theta);
            var y=159*Math.sin(theta);

            ctx.beginPath();
            ctx.arc(x,y,1,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fillStyle="black";
            ctx.fill();
        }

        // 黑圈
        ctx.beginPath();
        ctx.arc(0,0,154,0,Math.PI*2,false);
        ctx.closePath();
        ctx.lineWidth=2;
        ctx.strokeStyle="black";
        ctx.stroke();

        // 鱼鳞
        for(i=0;i<60;i++){
            var start=i*Math.PI/30;
            var end=start+Math.PI/40;
            var bias=Math.PI/72;
            var r=145;

            var x1=(r+5)*Math.cos(start);
            var y1=(r+5)*Math.sin(start);
            
            var x2=(r+5)*Math.cos(end);
            var y2=(r+5)*Math.sin(end);

            var x3=(r)*Math.cos(end+bias);
            var y3=(r)*Math.sin(end+bias);

            var x4=(r-5)*Math.cos(end);
            var y4=(r-5)*Math.sin(end);
            
            var x5=(r-5)*Math.cos(start);
            var y5=(r-5)*Math.sin(start);

            var x6=(r)*Math.cos(start+bias);
            var y6=(r)*Math.sin(start+bias);

            ctx.beginPath();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.lineTo(x3,y3);
            ctx.lineTo(x4,y4);
            ctx.lineTo(x5,y5);
            ctx.lineTo(x6,y6);
            ctx.closePath();
            ctx.fillStyle="black";
            ctx.fill();
        }

        // 黑圈
        ctx.beginPath();
        ctx.arc(0,0,136,0,Math.PI*2,false);
        ctx.closePath();
        ctx.lineWidth=2;
        ctx.strokeStyle="black";
        ctx.stroke();

        // 中心渐变背景
        var rgnt2=ctx.createRadialGradient(0,0,0,0,0,120);
        rgnt2.addColorStop(0,"rgb(130,130,130)");
        rgnt2.addColorStop(1,"rgb(40,40,40)");
        ctx.fillStyle=rgnt;
        ctx.beginPath();
        ctx.arc(0,0,120,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fillStyle=rgnt2;
        ctx.fill();

        // 上方五星
        ctx.beginPath();
        ctx.moveTo(-60,-80);
        ctx.lineTo(-18,-80);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="white";
        ctx.stroke();
        draw5Star(ctx,0,-80,10,"white");
        ctx.beginPath();
        ctx.moveTo(60,-80);
        ctx.lineTo(18,-80);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="white";
        ctx.stroke();

        // 文字
        ctx.textBaseline="bottom";
        ctx.textAlign="center";
        ctx.font = "42px Bahnschrift SemiBold Condensed";
        ctx.fillStyle="white";
        ctx.fillText("Premium",0,-13);
        ctx.fillText("Quality",0,49);

        // 下方五星
        ctx.beginPath();
        ctx.moveTo(-60,80);
        ctx.lineTo(-18,80);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="white";
        ctx.stroke();
        draw5Star(ctx,0,80,10,"white");
        ctx.beginPath();
        ctx.moveTo(60,80);
        ctx.lineTo(18,80);
        ctx.closePath();
        ctx.lineWidth=1;
        ctx.strokeStyle="white";
        ctx.stroke();

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

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

//--------------------------------------------------
// 函数：创建波浪式环形需要的数组
// n:浪头峰谷个数
// radius：环形半径
// waveHeight：浪高
// 返回：包含浪高中低点坐标的数组
//--------------------------------------------------
function createWaveCircleArray(n,radius,waveHeight){
    var arr=[];

    const LEN=n+2;// 数组长度比浪头峰谷数多两个以在绘图时形成闭环    
    for(var i=0;i<LEN;i++){
        var theta=i*Math.PI*2/n;
        var r=radius+Math.sin(Math.PI/2*i)*waveHeight;// 造成涨落
        var pt={};
        pt.x=r*Math.cos(theta);
        pt.y=r*Math.sin(theta);
        arr.push(pt);
    }

    return arr;
}

// 画实心五角星的函数
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();
}

/*---------------------------------------------
七点准连续剧三部曲
一领导们都很忙
二国内欣欣向荣一片繁荣祥和之景
三国外战乱饥荒肆虐天灾人祸频仍百姓倒悬不得脱

七点准连续剧核心主旨
赞扬之词如泉涌，溢美之语似花开，
字字珠玑闪光华，字字锦绣映瑶台。
----------------------------------------------*/
//-->
</script>

END

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

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

相关文章

Linux ARM平台开发系列讲解（QEMU篇） 1.2 新添加一个Linux kernel设备树

Linux ARM平台开发系列讲解（QEMU篇） 1.2 新添加一个Linux kernel设备树

1. 概述 上一章节我们利用QEMU成功启动了Linux kernel，但是细心的小伙伴就会发现，我们用默认的defconfig是没有找到设备树源文件的，但是又发现kernel启动时候它使用了设备树riscv-virtio,qemu，这是因为qemu用了一个默认的设备树文件，该章节呢我们就把这个默认的设备树文件…
阅读更多...
12-LINUX--进程间的通信

12-LINUX--进程间的通信

进程间通信&#xff1a;采用IPC机制&#xff08;进程间的用户空间相互独立&#xff0c;内核空间共享&#xff09;&#xff0c;有管道&#xff0c;信号量&#xff0c;共享内存&#xff0c;消息队列&#xff0c;套接字。 一.管道 管道可以用来在两个进程之间传递数据&#xff0c…
阅读更多...
Java8 收集Stream流中的结果

Java8 收集Stream流中的结果

目录 Stream流中的结果到集合中 Stream流中的结果到数组中 对流中数据进行聚合计算 1. 获取最大值 2. 获取最小值 3. 求总和 4. 平均值 5. 统计数量 对流中数据进行分组 对流中数据进行多级分组 对流中数据进行分区 对流中数据进行拼接 Stream流中的结果到集合中 …
阅读更多...
Facebook广告投放数据API对接流程

Facebook广告投放数据API对接流程

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、需求背景 App在Facebook、Google等巨头进行广告投放&#xff0c;想要拿到实时广告投放效果数据&#xff0c;如曝光、点击、花费、触…
阅读更多...
mybatis(5)参数处理＋语句查询

mybatis(5)参数处理＋语句查询

参数处理&#xff0b;语句查询 1、简单单个参数2、Map参数3、实体类参数4、多参数5、Param注解6、语句查询6.1 返回一个实体类对象6.2 返回多个实体类对象 List<>6.3 返回一个Map对象6.4 返回多个Map对象 List<Map>6.5 返回一个大Map6.6 结果映射6.6.1 使用resultM…
阅读更多...
流氓软件清理绝杀全家桶

流氓软件清理绝杀全家桶

下载地址&#xff1a;流氓软件清理绝杀全家桶.zip 网上仍有不少软件中携带流氓软件&#xff0c;甚至某些所谓的大厂出品的工具中也会有一些捆绑&#xff01; 对于玩机经验不太丰富的小白来说&#xff0c;也许一不小心&#xff0c;桌面就会被某些流氓软件搞得乌烟瘴气&#xf…
阅读更多...
【每日刷题】技巧合集-LC136、LC169

【每日刷题】技巧合集-LC136、LC169

1. LC136.只出现一次的数字 题目链接 解法一&#xff1a; 先给数字排序&#xff0c;如果num[i]与nums[i-1]或nums[i1]都不一致&#xff0c;则返回nums[i]。 class Solution {public int singleNumber(int[] nums) {if (nums.length 1){return nums[0];}Arrays.sort(nums);fo…
阅读更多...
RabbitMQ消息模型之Work消息模型

RabbitMQ消息模型之Work消息模型

Work消息模型 * work模型&#xff1a; * 多个消费者消费同一个队列中的消息&#xff0c;每个消费者获取到的消息唯一&#xff0c;且只能消费一次 * 作用&#xff1a;提高消息的消费速度&#xff0c;避免消息的堆积 * 默认采用轮询的方式分发消息 * 如果某…
阅读更多...
多张固定宽度元素，随着屏幕尺寸变化自动换行

多张固定宽度元素，随着屏幕尺寸变化自动换行

背景&#xff1a;多张固定宽度元素&#xff0c;随着屏幕尺寸变化自动换行实现&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevic…
阅读更多...
加速Python循环的12种方法,最高可以提速900倍

加速Python循环的12种方法,最高可以提速900倍

在本文中&#xff0c;我将介绍一些简单的方法&#xff0c;可以将Python for循环的速度提高1.3到900倍。 Python内建的一个常用功能是timeit模块。下面几节中我们将使用它来度量循环的当前性能和改进后的性能。 对于每种方法&#xff0c;我们通过运行测试来建立基线&#xff0…
阅读更多...
如何监控容器或K8s中的OpenSearch

如何监控容器或K8s中的OpenSearch

概述 当前 OpenSearch 使用的越来越多, 但是 OpenSearch 生态还不尽完善. 针对如下情况: 监控容器化或运行在 K8s 中的 OpenSearch 我查了下, 官方还没有提供完备的方案. 这里如何监控 K8s 中的 OpenSearch, 包括安装 exporter 插件、采集、展示全环节。 OpenSearch 简介…
阅读更多...
RTL设计指导原则

RTL设计指导原则

RTL设计指导原则 一、面积与速度互换原则 1. 电路设计中的面积与速度 面积&#xff1a;设计所消耗的目标器件的硬件资源数量或者ASIC芯片的面积。 FPGA&#xff1a;所消耗的触发器(FF&#xff09;和查找表&#xff08;LUT)数量来衡量; ASIC&#xff1a;设计的面积、门数等衡…
阅读更多...
【免安装的MATLAB--MATLAB online】

【免安装的MATLAB--MATLAB online】

目录&#xff1a; 前言账号的注册图片处理的示例准备图片脚本函数 总结 前言 在计算机、数学等相关专业中&#xff0c;或多或少都会与MATLAB产生藕断丝连的联系&#xff0c;如果你需要使用MATLAB&#xff0c;但是又不想要安装到自己的电脑上&#xff08;它实在是太大了啊&#…
阅读更多...
华为海思数字芯片设计笔试第四套

华为海思数字芯片设计笔试第四套

声明 下面的题目作答都是自己认为正确的答案&#xff0c;并非官方答案&#xff0c;如果有不同的意见&#xff0c;可以评论区交流。 这些题目也是笔者从各个地方收集的&#xff0c;感觉有些题目答案并不正确&#xff0c;所以在个别题目会给出自己的见解&#xff0c;欢迎大家讨论…
阅读更多...
L1-041 寻找250

L1-041 寻找250

对方不想和你说话&#xff0c;并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字。 输入格式&#xff1a; 输入在一行中给出不知道多少个绝对值不超过1000的整数&#xff0c;其中保证至少存在一个“250”。 输出格式&#xff1a; 在一行中输出第一次…
阅读更多...
【架构-8】Lambda和Kappa架构

【架构-8】Lambda和Kappa架构

Lambda架构&#xff1f; Lambda架构&#xff08;三层架构&#xff09;&#xff1a; &#xff08;1&#xff09;将数据处理分为实时和离线两部分。离线部分通过批量计算处理数据&#xff0c;实时部分则通过增加追加方式将数据合并到批处理中。 &#xff08;2&#xff09;批处理…
阅读更多...
js canvas实现裁剪图片并下载

js canvas实现裁剪图片并下载

简历上给自己挖的坑&#xff0c;面试被拷打&#xff0c;早就该填了T.T 参考&#xff1a;【js canvas实现图片裁剪】 https://www.bilibili.com/video/BV1QK411d7n1/?share_sourcecopy_web&vd_sourcebf743b20b76eab11028ba2fb05f056b4 效果 思路 组成&#xff1a; 上传文…
阅读更多...
基于Springcloud可视化项目：智慧工地可视化大数据云平台源码

基于Springcloud可视化项目：智慧工地可视化大数据云平台源码

目录 技术架构 智慧工地系统在实际推行过程中遇到的问题 智慧工地接纳程度较低 基础设施条件有待完善 智慧工地整体生态尚未完善 智慧工地平台各功能模块 施工过程工信程息信管息理管模理块 人员管理模块 生产管理模块 技术管理模块 质量管理模块 安全管理模块 绿…
阅读更多...
记录一个Kafka客户端Offset Explore连不上的问题

记录一个Kafka客户端Offset Explore连不上的问题

我昨天把集群重装了一下&#xff0c;再连这个工具就连不上了&#xff08;你先把zk和kafka在集群启起来&#xff09;&#xff0c;报错截图如下&#xff1a; 英文翻译过来大概就是说遍历zk指定路径不存在&#xff0c;我还以为zk的问题&#xff0c;回去又把zk的文档翻了一遍&#…
阅读更多...
多线程代码案例之阻塞队列

多线程代码案例之阻塞队列

目录 1.生产者消费者模型 2.使用标准库中的阻塞队列 3.模拟实现阻塞队列 在介绍阻塞队列之前&#xff0c;会先介绍一些前置知识&#xff0c;像队列&#xff1a;有普通队列、优先级队列、阻塞队列、和消息队列。前面两个是线程不安全的&#xff0c;而后面两个是线程安全的。本…
阅读更多...
最新文章

Copyright @ 2022~2023