【Canvas与艺术】绘制朝鲜国旗

【成图】

【代码】

<!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="100.jpg" style="display:none;"/></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=1001;
const HEIGHT=658;// 舞台对象
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.fillStyle="white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 蓝边ctx.fillStyle="rgb(12,80,183)";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,100);ctx.fillRect(-WIDTH/2,HEIGHT/2-100,WIDTH,100);// 红底ctx.fillStyle="rgb(254,0,0)";ctx.fillRect(-WIDTH/2,-200,WIDTH,400);// 白圈ctx.arc(-180,0,160,0,Math.PI*2,false);ctx.fillStyle="white";ctx.fill();// 画红五角星draw5Star(ctx,-180,0,128,"rgb(254,0,0)");}// 画前景this.paintFg=function(ctx){}
}// 画实心五角星的函数
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

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

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

相关文章

windows环境下DVWA靶场搭建

目录 一&#xff0c;安装PHPstudy 二&#xff0c;DVWA靶场上传 一&#xff0c;安装PHPstudy 具体安装步骤&#xff0c;请看上篇文章https://blog.csdn.net/m0_72210904/article/details/138258609?spm1001.2014.3001.5501 二&#xff0c;DVWA靶场上传 压缩包&#xff1a;&…

【3GPP IAB】 3GPP支持IAB架构概述

1 概述 IAB用于回传链路的无线传输&#xff0c;对于NR高频尤其重要&#xff0c;3GPP协议讨论了IAB的可能架构和部署方式&#xff0c;一起来看看吧。 2 IAB 功能和接口 IAB尽量重用为接入定义的现有功能和接口。特别是&#xff0c;移动终端(MT)、gNB- DU、gNB- CU、UPF、AMF和S…

虚拟与现实的融合:线上盲盒小程序的创新探索

随着科技的飞速发展&#xff0c;虚拟世界与现实生活之间的界限日益模糊。线上盲盒小程序&#xff0c;作为这一融合趋势的生动体现&#xff0c;以其独特的创新探索&#xff0c;将虚拟的惊喜与现实的体验完美结合&#xff0c;为我们打开了一个全新的购物世界。 线上盲盒小程序的…

VulnHub靶机 DC-9 靶机 详细渗透过程

VulnHub靶机 DC-9 打靶实战 详细渗透过程 目录 VulnHub靶机 DC-9 打靶实战 详细渗透过程一、将靶机配置导入到虚拟机当中二、渗透测试主机发现端口扫描Web渗透SQL注入登入后台文件包含SSH爆破提权 一、将靶机配置导入到虚拟机当中 靶机地址&#xff1a; https://www.vulnhub.…

使用QTcpSocket

(1)客户端每隔10ms向服务器发送一次数字字符串&#xff0c;从0开始。 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QTcpSocket> #include <QLabel> #include <QTimer> namespace Ui { class MainWindow; }class Mai…

单模与多模光纤:深入解析与应用

在现代通信系统中&#xff0c;光纤技术是不可或缺的一部分&#xff0c;它以其高速度和大容量传输数据而闻名。光纤主要分为两种类型&#xff1a;单模光纤&#xff08;Single-Mode Fiber, SMF&#xff09;和多模光纤&#xff08;Multimode Fiber, MMF&#xff09;。这两种光纤在…

Matplotlib是什么?

一、Matplotlib是什么&#xff1f; Matplotlib是一个Python语言的2D绘图库&#xff0c;它非常广泛地用于数据的可视化。以下是一些主要特点&#xff1a; 多功能性&#xff1a;它允许用户创建各种静态、动态或交互式的图表&#xff0c;如线图、散点图、直方图等。跨平台性&…

计算机视觉——使用OpenCV GrabCut算法从图像中移除背景

GrabCut算法 GrabCut算法是一种用于图像前景提取的技术&#xff0c;由Carsten Rother、Vladimir Kolmogorov和Andrew Blake三位来自英国剑桥微软研究院的研究人员共同开发。该技术的核心目标是在用户进行最少交互操作的情况下&#xff0c;自动从图像中分割出前景对象。 在Gra…

机器学习/算法工程师面试题目与答案-数学基础部分

机器学习/算法工程师面试题目--数学基础部分 一、数学基础1、微积分SGD,Momentum,Adagard,Adam原理L1不可导的时候该怎么办sigmoid函数特性 2、统计学&#xff0c;概率论求 Max(a, b) 期望拿更长的玫瑰花的最好策略最大化工作天数的员工数切比雪夫不等式随机截成三段组成三角形…

信号分解 | RLMD(鲁棒性局部均值分解)-Matlab

分解效果 RLMD(鲁棒性局部均值分解) RLMD(鲁棒性局部均值分解)-Matlab 代码实现 % %% 清除所有变量 关闭窗口 clc clear all close all%% 导入数据 % data = xlsread(Data.xlsx);%% 输入信号%% RLMD分解 %参数进行设置 % options.display =

SpringCloud系列(20)--Ribbon的简介及使用

1、Ribbon的简介 Spring Cloud Ribbon是基于Netflix Ribboh实现的一套客户端负载均衡的工具&#xff0c;简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的配置项如连接超时…

ETL中元数据处理的方式

ETLCloud平台是用于处理从数据抽取、转换、加载到持续数据捕获等一系列数据管理活动。除此之外还支持微服务治理与快速开发&#xff0c;并且具备数据库监听功能&#xff0c;能够以不同的方式监听并同步源数据库表数据到目标系统&#xff0c;比如直接传输、通过ETL流程处理或者传…

交直流充电桩检测的基础知识

交直流充电桩检测是电动汽车充电设施的重要组成部分&#xff0c;其目的是确保充电桩的正常运行&#xff0c;保障电动汽车的安全充电。以下是关于交直流充电桩检测的一些基础知识。 我们需要了解什么是交直流充电桩&#xff0c;简单来说&#xff0c;交直流充电桩是一种为电动汽车…

二维数组打印菱形(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;char arr[5][5] { { , , *, , }, { , *, *, *, },{*, *, *, *, *}, { , *, *, *, …

使用NGINX做局域网内 浏览器直接访问链接 拓展外网链接访问本地

达成目的功能&#xff1a; 在本地服务的一个文件路径下&#xff0c;局域网内用ip和路径名访问到对应的地址&#xff1b;如 10.5.9.0/v1 即可访问到 某个固定本地地址目录 V1下&#xff0c;名为index.html的文件。前言 NGINX 是一个非常流行的开源 Web 服务器和反向代理服务器…

社交媒体数据恢复:Reddit

Reddit是一個娛樂、社交及新聞網站&#xff0c;註冊使用者可以將文字或連結在網站上發布&#xff0c;使它基本上成為了一個電子佈告欄系統。註冊使用者可以對這些貼文進行投票&#xff0c;結果將被用來進行排名和決定它在首頁或子頁的位置。網站上的內容分類被稱為「subreddit」…

Springboot+Vue项目-基于Java+MySQL的智慧校园管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

【研发管理】产品经理知识体系-产品设计与开发工具

导读&#xff1a;产品设计与开发工具的重要性体现在多个方面&#xff0c;它们对于产品的成功开发、质量提升以及市场竞争力都具有至关重要的影响。产品设计工具可以帮助设计师更高效地创建和优化产品原型。开发工具在产品开发过程中发挥着至关重要的作用。产品设计与开发工具还…

PotatoPie 4.0 实验教程(25) —— FPGA实现摄像头图像直方图均衡变换

图像的直方图均衡是什么&#xff1f; 图像的直方图均衡是一种用于增强图像对比度的图像处理技术。在直方图均衡中&#xff0c;图像的像素值被重新分配&#xff0c;以使得图像的直方图变得更均匀&#xff0c;即各个像素值的分布更加平衡。这意味着直方图中每个像素值的频率大致…

AMBA-CHI协议详解(二)

《AMBA 5 CHI Architecture Specification》 文章目录 2.1 Channels综述2.2 Channel域段2.2.1 request fields2.2.2 Response fields2.2.3 Snoop request fields2.2.4 Data fields 2.3 事务结构2.3.1 Read transactions2.3.1.1 Allocating Read2.3.1.2 Non-allocating Read 2.…