【Canvas与艺术】环形橄榄枝纹饰

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>环形橄榄枝(draft2)</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></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){//sleep(100);window.requestAnimationFrame(animate);   }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){    }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    }// 画前景this.paintFg=function(ctx){// 底色ctx.fillStyle = "navy";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);var r=120;var n=32;// 辅助线/*ctx.strokeStyle="white";ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.stroke();*/drawLeftOliver(ctx,0,0,r,n,Math.PI/2+Math.PI/24,Math.PI/2*3-Math.PI/12,Math.PI/6,Math.PI/4,"gold");drawRightOliver(ctx,0,0,r,n,-Math.PI/2+Math.PI/12,Math.PI/2-Math.PI/24,Math.PI/6,Math.PI/4,"gold");writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火原创","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:画顺时针橄榄枝
x:横坐标
y:纵坐标
r:橄榄枝中心半径
n:叶片对数
start：起始角度
end:中止角度
alpha： 叶片中线到圆弧的角度
beta：叶片中线到圆弧的角度
color:叶片颜色
----------------------------------------------------------*/
function drawLeftOliver(ctx,x,y,r,n,start,end,alpha,beta,color){const R=r;                // 橄榄枝中心半径var   N=n;                // 有N对叶片    const START=start;        // 起始角度const END=end;            // 中止角度const STEP=(END-START)/N;// 步长        const ALPHA=alpha;        // 叶片中线到圆弧的角度const L=R/8;            // 叶片长度const BETA=beta;        // 叶片中线到圆弧的角度ctx.save();    ctx.translate(x,y);ctx.rotate(STEP);ctx.lineWidth=1;ctx.strokeStyle=color;// 画中心圈ctx.beginPath();for(var i=-1;i<=N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.lineTo(a.x,a.y);            }ctx.stroke();// 画外侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));r=L/9;var angle=theta+ALPHA;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta+ALPHA+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta+ALPHA-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;angle=theta+ALPHA;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y);            ctx.closePath();            ctx.fill();}// 画内侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));r=L/9;var angle=theta-ALPHA+Math.PI;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta-ALPHA+Math.PI+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta-ALPHA+Math.PI-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;angle=theta-ALPHA+Math.PI;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y);            ctx.closePath();            ctx.fill();}    ctx.restore();
}/*----------------------------------------------------------
函数:画逆时针橄榄枝
x:横坐标
y:纵坐标
r:橄榄枝中心半径
n:叶片对数
start：起始角度
end:中止角度
alpha： 叶片中线到圆弧的角度
beta：叶片中线到圆弧的角度
color:叶片颜色
----------------------------------------------------------*/
function drawRightOliver(ctx,x,y,r,n,start,end,alpha,beta,color){const R=r;                // 橄榄枝中心半径var   N=n;                // 有N对叶片    const START=start;        // 起始角度const END=end;            // 中止角度const STEP=(END-START)/N;// 步长        const ALPHA=alpha;        // 叶片中线到圆弧的角度const L=R/8;            // 叶片长度const BETA=beta;        // 叶片中线到圆弧的角度ctx.save();ctx.translate(x,y);ctx.lineWidth=1;ctx.strokeStyle=color;// 画中心圈ctx.beginPath();for(var i=-1;i<=N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.lineTo(a.x,a.y);            }ctx.stroke();// 画外侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));r=L/9;var angle=theta-ALPHA;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta-ALPHA+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta-ALPHA-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;angle=theta-ALPHA;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y);            ctx.closePath();            ctx.fill();}// 画内侧叶子for(var i=0;i<N;i++){var theta=START+STEP*i;var r=R;var a=createPt(r*Math.cos(theta),r*Math.sin(theta));r=L/9;var angle=theta+ALPHA-Math.PI;var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta+ALPHA-Math.PI+BETA;var d=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L/9*4/Math.cos(BETA);angle=theta+ALPHA-Math.PI-BETA;var e=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=L;angle=theta+ALPHA-Math.PI;var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));ctx.fillStyle=color;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.quadraticCurveTo(d.x,d.y,c.x,c.y);ctx.quadraticCurveTo(e.x,e.y,b.x,b.y);            ctx.closePath();            ctx.fill();}    ctx.restore();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();} 
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
一束光照进铁塔，铁塔里的肮脏龌龊被显现，这束光便有了罪。--尼采
--------------------------------------------------------------*/
//-->
</script>

END

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓蓝牙日志的获取方法

安卓蓝牙日志的获取方法

有过蓝牙调试经历的同学们可能都知道&#xff0c;在安卓系统中&#xff0c;在手机的设置–>开发人员页面下有一个开启蓝牙HCI信息收集日志选项开关&#xff0c;如下图中标红处&#xff0c; 打开该开关&#xff0c;就可以收集本机发送和接收的蓝牙HCI包。蓝牙包的数据会保存在…
阅读更多...
git提交本地项目到远程仓库

git提交本地项目到远程仓库

1、查看项目目录&#xff0c;是否存在.git文件夹&#xff08;若存在则删除&#xff09; 2、登录git并新建一个空白项目 3、idea创建本地git仓库&#xff08;选择本地项目&#xff09; 4、添加要提交的项目&#xff08;项目右键&#xff09; 5、提交代码到本地仓库 6、配置远程…
阅读更多...
轻松实现微服务间的无缝通信：OpenFeign入门指南

轻松实现微服务间的无缝通信：OpenFeign入门指南

OpenFeign 前言1、导入依赖2、开启feign调用3、编写OpenFeign客户端4、Fegin接口实现5、Feign接口调用 前言 Spring Cloud OpenFeign是一种基于Spring Cloud的声明式REST客户端&#xff0c;它简化了与HTTP服务交互的过程。它将REST客户端的定义转化为Java接口&#xff0c;并且…
阅读更多...
css 宫格样式内容上下结构

css 宫格样式内容上下结构

结构 <div class"sc-content-group"><div class"sc-content-item"><div class"sc-item-img"><el-image :src"src" :preview-src-list"[src]"></el-image></div><div class"s…
阅读更多...
datax关于postsql数据增量迁移的问题

datax关于postsql数据增量迁移的问题

看官方文档是不支持的 数据源及同步方案_大数据开发治理平台 DataWorks(DataWorks)-阿里云帮助中心 (aliyun.com) 看了下源码有个postsqlwriter 看了下也就拼接sql 将 PostgresqlWriter中的不允许更新先注释了 让他过去先 然后看到 WriterUtil中的对应方法 getWriteTemplat…
阅读更多...
咸鱼之王手游内购修复无bug运营版联网架设+后台

咸鱼之王手游内购修复无bug运营版联网架设+后台

今天给大家带来一款单机游戏的架设&#xff1a;咸鱼之王手游。 另外&#xff1a;本人承接各种游戏架设&#xff08;单机联网&#xff09; 本人为了学习和研究软件内含的设计思想和原理&#xff0c;带了架设教程仅供娱乐。 教程是本人亲自搭建成功的&#xff0c;绝对是完整可…
阅读更多...
【代码随想录训练营第42期 Day38打卡 - 动态规划Part6 - LeetCode 322. 零钱兑换 279.完全平方数 139.单词拆分

【代码随想录训练营第42期 Day38打卡 - 动态规划Part6 - LeetCode 322. 零钱兑换 279.完全平方数 139.单词拆分

目录 一、做题心得 二、题目与题解 题目一&#xff1a;322. 零钱兑换 题目链接 题解&#xff1a;动态规划--完全背包 题目二&#xff1a; 279.完全平方数 题目链接 题解&#xff1a;动态规划--完全背包 题目三&#xff1a;139.单词拆分 题目链接 题解&#xff1a;动…
阅读更多...
qt-16可扩展对话框--隐藏和展现

qt-16可扩展对话框--隐藏和展现

可扩展对话框 知识点extension.hextension.cppmain.cpp运行图初始化隐藏展现--点击--详细按钮 知识点 MainLayout->setSizeConstraint(QLayout::SetFixedSize);//固定窗口大小 extension.h #ifndef EXTENSION_H #define EXTENSION_H#include <QDialog>class Extens…
阅读更多...
你是如何更精准地指引模型，激发其无尽的创造力？

你是如何更精准地指引模型，激发其无尽的创造力？

随着大型语言模型日益凸显其重要性&#xff0c;发掘并充分利用它们的潜力&#xff0c;很大程度上依赖于我们如何巧妙构思和构造指令——即Prompt的精炼艺术。优化Prompt撰写技巧&#xff0c;将能够更好地引导大模型&#xff0c;为各类应用场景生成高质量的文本输出。分享出你的…
阅读更多...
【STM32】C语言基础补充

【STM32】C语言基础补充

学习过程中发现自己好些需要用到的C语言语法、特征都不太熟练了&#xff0c;特意记录一下&#xff0c;免得忘记了&#xff0c;以后遇到了新的也会继续更新 目录 1 全局变量 2 结构体 3 静态变量 4 memset()函数 5 使用8位的存储器存16位的数 1 全局变量…
阅读更多...
Excel“取消工作表保护”忘记密码并恢复原始密码

Excel“取消工作表保护”忘记密码并恢复原始密码

文章目录 1.前言2.破解步骤3. 最终效果4.参考文献 1.前言 有时候别人发来的Excel中有些表格不能编辑&#xff0c;提示如下&#xff0c;但是又不知道原始密码 2.破解步骤 1、打开您需要破解保护密码的Excel文件&#xff1b; 2、依次点击菜单栏上的视图—宏----录制宏&#xf…
阅读更多...
Keil C51 插件 快速复制一行

Keil C51 插件 快速复制一行

此插件解决的问题 目前 Keil 软件 只可以 先选中一行&#xff0c;再Ctrl C Ctrl V , 太麻烦了 Keil 插件 -- Python 代码 import sys# 插入当前行内容 def insert_line(current_file_path, line_number):line_to_insert # 读取文件内容with open(current_file_path, r, enc…
阅读更多...
微信小游戏授权问题

微信小游戏授权问题

微信小程序获取用户相关信息的接口&#xff0c;如wx.getUserCloudStorage&#xff0c;报错&#xff1a;please go to mp to announce your privacy usage。 需要在微信公众平台设置用户隐私保护。
阅读更多...
APP支付宝授权获取code uniapp

APP支付宝授权获取code uniapp

1.点击使用plus.runtime跳转打开支付宝 //打开支付宝授权&#xff0c;在支付宝APP中授权后会在支付宝中跳转到你填写的h5地址//urls是授权地址可以后端拼接也可以前端写死 //以下是一个拼接示例&#xff0c;需修改app_id的值和redirect_uri的值即可 //app_id是商户的APPID&…
阅读更多...
OpenDDS的Rtps_Udp传输协议可靠性QoS收发基本流程

OpenDDS的Rtps_Udp传输协议可靠性QoS收发基本流程

OpenDDS中，实现了Rtps_Udp传输协议（非纯udp）的可靠性传输。传输的线程包括： 1）发送方线程主要线程和定时器 《1》应用线程 《2》网络异步发送线程 《3》Heartbeat定时器 《4》Nak_response定时器 2）接收方主要线程和定时器 《1》网络异步接收线程 《2》heartbeat_respons…
阅读更多...
Ubuntu 16.04 通过deb包安装内核头文件

Ubuntu 16.04 通过deb包安装内核头文件

文章目录 前言通过deb包安装内核头文件 前言 Ubuntu16.04部分内核版本无法通过 apt-get install linux-headers-$(uname -r) 来进行安装&#xff1a; # cat /etc/lsb-release DISTRIB_IDUbuntu DISTRIB_RELEASE16.04 DISTRIB_CODENAMExenial DISTRIB_DESCRIPTION"Ubuntu…
阅读更多...
汇编

汇编

汇编指令 随机数mov指令mov指令ldr指令&#xff08;伪指令&#xff09;add指令sub指令bic指令orr指令b指令cmp指令stmfd指令ldmfd指令import栈汇编指令的s后缀 随机数 1.如果某个数的数值范围是0~255之间&#xff0c;那么这个数一定是立即数&#xff1b; 2.把某个数展开成2进制…
阅读更多...
网络工程师必备10个Linux网络命令，超好用

网络工程师必备10个Linux网络命令，超好用

号主&#xff1a;老杨丨11年资深网络工程师&#xff0c;更多网工提升干货&#xff0c;请关注公众号&#xff1a;网络工程师俱乐部 下午好&#xff0c;我的网工朋友 掌握正确的工具对于提升工作效率的重要性不言而喻&#xff0c;尤其在网络工程领域&#xff0c;这一点更是至关重…
阅读更多...
尚品汇-购物车列表、临时用户购物车与登录用户购物车合并实现（三十七）

尚品汇-购物车列表、临时用户购物车与登录用户购物车合并实现（三十七）

目录&#xff1a; &#xff08;1&#xff09;功能—展示购物车列表 &#xff08;2&#xff09;在web-all添加前端实现 &#xff08;3&#xff09;功能--合并购物车 &#xff08;1&#xff09;功能—展示购物车列表 购物车列表接口&#xff1a;CartService /*** 通过用户Id …
阅读更多...
买完服务器后，如何部署项目|如何通过宝塔部署项目

买完服务器后，如何部署项目|如何通过宝塔部署项目

一、前言 很多人都会在腾讯云、阿里云等平台上买服务器&#xff0c;但是买了服务器后&#xff0c;不知道接下来要干什么&#xff0c;或者是怎么部署项目。 买完服务器后&#xff0c;第一步就是再买一个数据盘&#xff0c;然后将数据盘挂载到服务器上&#xff0c;不知道教程的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023