使用HTML5绘制标准五星红旗

码：

<!DOCTYPE html>

<html>

<head>

<title>中国标准国旗</title>

</head>

<body>

/**

使用HTML5绘制标准五星红旗

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(‘2d’);

var width=canvas.width;

var height=width*2/3;

var w=width/30;//小网格的宽

context.fillStyle=”red”;

context.fillRect(0,0,width,height);

var maxR = 0.15, minR = 0.05;//

var maxX = 0.25, maxY = 0.25;//大五星的位置

var minX = [0.50, 0.60, 0.60, 0.50];

var minY = [0.10, 0.20, 0.35, 0.45];

// 画大☆

var ox = height * maxX, oy = height * maxY;

create5star(context,ox,oy,height * maxR,”#ff0″,0);//绘制五角星

// 画小★

for (var idx = 0; idx < 4; idx++) {

var sx = minX[idx] * height, sy = minY[idx] * height;

var theta = Math.atan((oy – sy)/(ox – sx));

create5star(context,sx, sy, height * minR, “#ff0”,-Math.PI/2+theta);

}

//辅助线

context.moveTo(0,height/2)

context.lineTo(width,height/2);

context.stroke();

context.moveTo(width/2,0);

context.lineTo(width/2,height);

context.stroke();

//画网格，竖线

for(var j=0;j< 15;j++){

context.moveTo(j*w,0);

context.lineTo(j*w,height/2);

context.stroke();

}

//画网格，横线

for(var j=0;j< 10;j++){

context.moveTo(0,j*w);

context.lineTo(width/2,j*w);

context.stroke();

}

//画大圆

context.beginPath();

context.arc(ox,oy,maxR*height,0,Math.PI*2,false);

context.closePath();

context.stroke();

// 画小圆

for (var idx = 0; idx < 4; idx++) {

context.beginPath();

var sx = minX[idx] * height, sy = minY[idx] * height;

context.arc(sx, sy, height * minR,0,Math.PI*2,false);

context.closePath();

context.stroke();

}

//大圆中心与小圆中心连接线

for (var idx = 0; idx < 4; idx++) {

context.moveTo(ox,oy);

var sx = minX[idx] * height, sy = minY[idx] * height;

context.lineTo(sx, sy);

context.stroke();

}

//绘制五角星

/**

* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上

* rotate:绕对称轴旋转rotate弧度

function create5star(context,sx,sy,radius,color,rotato){

context.save();

context.fillStyle=color;

context.translate(sx,sy);//移动坐标原点

context.rotate(Math.PI+rotato);//旋转

context.beginPath();//创建路径

var x = Math.sin(0);

var y= Math.cos(0);

var dig = Math.PI/5 *4;

for(var i = 0;i< 5;i++){//画五角星的五条边

var x = Math.sin(i*dig);

非下表中的所有实体都能在所有的浏览器中正确地显示。

目前，IE 11 是唯一一个能正确显示所有 HTML5 实体的浏览器。

字符	实体名称	十六进制
Κ	Kappa	0039A
κ	kappa	003BA
ϰ	kappav	003F0
&Kcedil;	Kcedil	00136
&kcedil;	kcedil	00137
&Kcy;	Kcy	0041A
&kcy;	kcy	0043A
&Kfr;	Kfr	1D50E
&kfr;	kfr	1D528
&kgreen;	kgreen	00138
&KHcy;	KHcy	00425
&khcy;	khcy	00445
&KJcy;	KJcy	0040C
&kjcy;	kjcy	0045C
&Kopf;	Kopf	1D542
&kopf;	kopf	1D55C
&Kscr;	Kscr	1D4A6
&kscr;	kscr	1D4C0

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

小伙伴们，感觉我的分享很不错的别忘记“赞赏”我一下哟!

果图

各位观众大家好，今天给大家带来的是

HTML5焦点图片波浪过渡效果切换动画特效

是不是很炫酷！

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

废话不多说上源码

网站样式源码：

<!doctype html>

<html>

<head>

<title>HTML5焦点图片波浪过渡效果切换动画特效</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.parent {

width: 681px;

height: 384px;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto auto;

overflow: hidden;

position: absolute;

-webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

-moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

}

svg {

position: absolute;

z-index: 1;

width: 681px;

height: 384px;

}

button {

position: absolute;

z-index: 50;

width: 40px;

overflow: hidden;

height: 40px;

border: none;

border-radius: 50%;

background: #fff;

cursor: pointer;

-webkit-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

-moz-box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

box-shadow: 0 0 88px 5px rgba(0, 0, 0, 0.75);

}

button:focus {

outline-width: 0;

}

circle {

stroke: #fff;

fill: none;

transition: 0.3s;

}

#svg1 circle {

transition-timing-function: linear;

}

#svg2 circle {

transition-timing-function: linear;

}

#Capa_1 {

position: absolute;

width: 16px;

height: 16px;

transform: translate(-7px, -8px);

}

#Capa_2 {

position: absolute;

width: 16px;

height: 16px;

transform: translate(-9px, -8px);

}

.right {

margin-left: 628px;

margin-top: 168px;

border: 1px solid #849494;

background-color: transparent;

transition: .5s;

}

.right:hover {

background-color: #fff;

}

.left {

margin-left: 0.5%;

margin-top: 6.17%;

border: 1px solid #849494;

background-color: transparent;

transition: .5s;

}

.left:hover {

background-color: #fff;

}

.circle1 {

transition-delay: 0.05s;

}

.circle2 {

transition-delay: 0.1s;

}

.circle3 {

transition-delay: 0.15s;

}

.circle4 {

transition-delay: 0.2s;

}

.circle5 {

transition-delay: 0.25s;

}

.circle6 {

transition-delay: 0.3s;

}

.circle7 {

transition-delay: 0.35s;

}

.circle8 {

transition-delay: 0.4s;

}

.circle9 {

transition-delay: 0.45s;

}

.circle10 {

transition-delay: 0.05s;

}

.circle11 {

transition-delay: 0.1s;

}

.circle12 {

transition-delay: 0.15s;

}

.circle13 {

transition-delay: 0.2s;

}

.circle14 {

transition-delay: 0.25s;

}

.circle15 {

transition-delay: 0.3s;

}

.circle16 {

transition-delay: 0.35s;

}

.circle17 {

transition-delay: 0.4s;

}

.circle18 {

transition-delay: 0.45s;

}

.slide1 {

}

.slide2 {

}

.slide3 {

}

.slide4 {

}

.slider {

position: absolute;

width: 400%;

height: 100%;

background: #000;

display: inline-flex;

overflow: hidden;

}

.slide1,

.slide2,

.slide3,

.slide4 {

position: absolute;

background-position: center;

background-size: cover;

color: #fff;

font-size: 62px;

padding-top: 138px;

font-weight: 800;

font-family: 'Heebo', sans-serif;

text-align: center;

width: 25%;

height: 100%;

z-index: 10;

transition: 1.4s;

}

.tran {

transform: scale(1.3);

}

.up1 {

z-index: 20;

}

.up2 {

z-index: 40;

}

.steap {

stroke-width: 0;

}

.streak {

stroke-width: 82px;

}

@media (max-width: 700px) {

.parent {

margin-left: 1%;

}

</style>

</head>

viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

<g>

<path style='fill: #9d9d9d;' d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5

c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z

</g>

</svg>

</button>

viewBox="0 0 477.175 477.175" style="enable-background:new 0 0 477.175 477.175;" xml:space="preserve">

<g>

<path style='fill: #9d9d9d;' d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225

c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z">

</g>

</svg>

</button>

</svg>

</svg>

<div id='slide1' class='slide1 up1'>MOUNTAIN</div>

<div id='slide2' class='slide2'>BEACH</div>

<div id='slide3' class='slide3'>FOREST</div>

<div id='slide4' class='slide4'>DESERT</div>

</div>

</div><script>

var curpage = 1;

var sliding = false;

var click = true;

var left = document.getElementById('left');

var right = document.getElementById('right');

var pagePrefix = 'slide';

var pageShift = 500;

var transitionPrefix = 'circle';

var svg = true;

function leftSlide() {

if (click) {

if (curpage == 1) curpage = 5;

console.log('woek');

sliding = true;

curpage--;

svg = true;

click = false;

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.className += ' tran';

}

setTimeout(()=>{

move();

},200);

setTimeout(()=>{

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.classList.remove('tran');

};

},1400);

}

function rightSlide() {

if (click) {

if (curpage == 4) curpage = 0;

console.log('woek');

sliding = true;

curpage++;

svg = false;

click = false;

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.className += ' tran';

}

setTimeout(()=>{

move();

},200);

setTimeout(()=>{

for(k=1;k<=4;k++){

var a1 = document.getElementById(pagePrefix + k);

a1.classList.remove('tran');

};

},1400);

}

function move() {

if (sliding) {

sliding = false;

if (svg) {

for (j = 1; j <= 9; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("steap");

c.setAttribute("class", (transitionPrefix + j) + " streak")

console.log('streak');

}

} else {

for (j = 10; j <= 18; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("steap");

c.setAttribute("class", (transitionPrefix + j) + " streak")

console.log('streak');

}

// for(k=1;k<=4;k++){

// var a1 = document.getElementById(pagePrefix + k);

// a1.className += ' tran';

// }

setTimeout(() => {

for (i = 1; i <= 4; i++) {

if (i == curpage) {

var a = document.getElementById(pagePrefix + i);

a.className += ' up1';

} else {

var b = document.getElementById(pagePrefix + i);

b.classList.remove("up1");

}

};

sliding = true;

}, 600);

setTimeout(() => {

click = true;

}, 1700);

setTimeout(() => {

if (svg) {

for (j = 1; j <= 9; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("streak");

c.setAttribute("class", (transitionPrefix + j) + " steap");

}

} else {

for (j = 10; j <= 18; j++) {

var c = document.getElementById(transitionPrefix + j);

c.classList.remove("streak");

c.setAttribute("class", (transitionPrefix + j) + " steap");

}

sliding = true;

}

}, 850);

setTimeout(() => {

click = true;

}, 1700);

}

left.onmousedown=()=>{

leftSlide();

}

right.onmousedown=()=>{

rightSlide();

}

document.onkeydown=(e)=>{

if(e.keyCode==37){

leftSlide();

}

else if (e.keyCode==39) {

rightSlide();

}

//for codepen header

setTimeout(()=>{

rightSlide();

},500)

</script>

</div>

</body>

</html>

在线咨询

上一篇：10分钟内浏览器中，手把手教你构建一个手势识别模型 - 代码开源
下一篇：HTML 颜色

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用HTML5绘制标准五星红旗

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

网站样式源码：

您的项目需求