html绘制五角星怎么写

1.如何用html5写特殊符号五角星

首先贴出HTML5页面的代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Canvas案例</title>

</head>

<script type="text/javascript" src="script.js"></script>

<body onl oad="draw('canvas')">

<h1>Canvas案例</h1>

<canvas id='canvas' width="400" height="300" />

</body>

</html>

在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。

//script.js

function draw(id)

{

var canvas = document.getElementById(id);

if(canvas==null){

return false;

}

var context = canvas.getContext('2d');

context.fillStyle="#eeeeff";

context.fillRect(0,0,400,300);

context.fillStyle='rgba(255,0,0,0.25)';

context.translate(200,50);

createFiveStar(context);

context.fill();

}

function createFiveStar(context){

var dx = 0;

var dy = 100;

var s = 50;

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);

var y = Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);

}

context.closePath();

}

我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。

而draw方法中呢又会执行createFiveStart函数。

下面我来分析下createFiveStart函数的内容:

function createFiveStar(context){

var dx = 0;//画出来的五角星x偏移位置

var dy = 100;//画出来的五角星y偏移位置

var s = 50;//画出来的五角星的大小

context.beginPath();//开始路径绘制

var x = Math.sin(0);//默认的x坐标

var y = Math.cos(0);//默认的y坐标

var dig = Math.PI/5*4;//弧度值

for(var i=0;i<5;i++){

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

var y = Math.cos(i*dig);

context.lineTo(dx+x*s,dy+y*s);//划线

}

context.closePath();//结束路径

}

好了到了这里我们就完成了HTML5中,五角星的绘制。

2.html怎么显示五角星

CSS样式:

.star-five {

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

3.如何用html5写特殊符号五角星

首先贴出HTML5页面的代码:<!DOCTYPE html><meta charset="UTF-8" />Canvas案例<body onl oad="draw('canvas')">

Canvas案例

在这个页面中我们写了一个canvas元素。

该元素的ID为canvas。然后链接了script.js这个文件。

//script.jsfunction draw(id){var canvas = document.getElementById(id);if(canvas==null){return false;}var context = canvas.getContext('2d');context.fillStyle="#eeeeff";context.fillRect(0,0,400,300);context.fillStyle='rgba(255,0,0,0.25)';context.translate(200,50);createFiveStar(context);context.fill();}function createFiveStar(context){var dx = 0;var dy = 100;var s = 50;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);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();}我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。

而draw方法中呢又会执行createFiveStart函数。下面我来分析下createFiveStart函数的内容:function createFiveStar(context){var dx = 0;//画出来的五角星x偏移位置var dy = 100;//画出来的五角星y偏移位置var s = 50;//画出来的五角星的大小context.beginPath();//开始路径绘制var x = Math.sin(0);//默认的x坐标var y = Math.cos(0);//默认的y坐标var dig = Math.PI/5*4;//弧度值for(var i=0;i<5;i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);//划线}context.closePath();//结束路径}好了到了这里我们就完成了HTML5中,五角星的绘制。

4.html怎么显示五角星

CSS样式:.star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);}。

html绘制五角星怎么写

转载请注明出处育才学习网 » html绘制五角星怎么写

知识

html提交按钮怎么写

阅读(286)

本文主要为您介绍html提交按钮怎么写,内容包括html中提交按钮和重置按钮代码,要怎么输入,HTML怎么实现文本框里加入一个提交按钮,html中提交按钮和重置按钮代码,要怎么输入还有留言的留言框求高。需要准备的材料分别有:电脑、浏览器、html编

知识

habits的音标怎么写

阅读(198)

本文主要为您介绍habits的音标怎么写,内容包括habit的音标怎么写,habit的音标怎么写,abilities的音标怎么写。habit的音标是[ˈhæbɪt],详细信息如下:habit 英 [ˈhæbɪt] 美 [ˈhæbɪt] n.习惯,习性;气质;宗教服装

知识

gu字怎么写扎紧

阅读(198)

本文主要为您介绍gu字怎么写扎紧,内容包括gu字怎么写,gu字怎么写,紧gu咒gu字怎么写。姓氏中的 gu 字这样写:辜、鼓、古、骨、谷、榖、固、顾等八个姓氏。辜:gū 罪:无~。死有余~。2、背弃;违背:~负。~恩背义。3、姓

知识

float类型怎么写

阅读(339)

本文主要为您介绍float类型怎么写,内容包括易语言写float类型怎么写,float是什么数据类型,float类型什么意思有什么作用用例子表示一下。float:浮点型,含字节数为4,32bit,数值范围为-3.4E38~3.4E38(7个有效位)double:双精度实型,含字节数为8

知识

谢老师用英语怎么写

阅读(268)

本文主要为您介绍谢老师用英语怎么写,内容包括谢谢老师的英文怎么说,谢谢老师英语怎么说,谢老师英语怎么写女的。“谢谢老师”的英文:Thank you, teacher. 其中thank 是感谢,谢谢的意思;teacher 是老师,教师的意思。并不

知识

初级技工申请书怎么写

阅读(207)

本文主要为您介绍初级技工申请书怎么写,内容包括技工上岗申请书怎么写,初级职称申请书怎么写,工程类初级技术员申请书怎么写。尊敬的领导: 我叫**,于*年*月*日进入公司,根据公司的需要,目前担任**一职,负责 **********工作。本人工作认真、细心

知识

宾馆任职部门怎么写

阅读(179)

本文主要为您介绍宾馆任职部门怎么写,内容包括任职部门怎么填写,任职部门怎么填,任职部门怎样填写。申请信用卡任职部门填写是“单位名称+任职部门”。可以填写:若你是在车间生产,就写(生产部),若是公司的行政管理人员,就写(行政部门),若

知识

经营流水状况怎么写

阅读(297)

本文主要为您介绍经营流水状况怎么写,内容包括公司经营状况怎么写,经营情况怎么写,经营流水对公流水咋写。营业流水或者对公流水,都是银行流水。银行流水不是自己写的,需要去对应的银行办理业务要求前台打印的。银行流水是指银行活期账户(包括

知识

项目申报可行性怎么写

阅读(216)

本文主要为您介绍项目申报可行性怎么写,内容包括项目可行性报告书怎么写,工程项目可行性报告项目怎么写,项目操作可行性报告怎么写。全称叫可行性研究报告。政府投资项目必须委托有资质的工程咨询单位编制。民营企业也必须委托有资质的工程

知识

29张当票读后感怎么写

阅读(207)

本文主要为您介绍29张当票读后感怎么写,内容包括老师要我们写一个作文本的读书笔记,一个作文本有29页,该怎么写,辽宁教育青少超级伙伴观后感怎么写,跪求200字以内的励志、感人的小故事+读后感,读后感150字左右,记。《鲁滨逊漂流记有感》 回

知识

3月2日大写怎么写

阅读(951)

本文主要为您介绍3月2日大写怎么写,内容包括3月2日会计大写日期怎么写,2012年3月2日会计大写日期怎么写,2017年2月3日大写怎么写。贰零壹伍年叁月叁拾壹日。3月的大写前面不加“零”。《支付结算办法》附一“正确填写票据和结算凭证的基本

知识

520英文怎么写

阅读(359)

本文主要为您介绍520英文怎么写,内容包括520用英语怎么说,520的英文怎么写,520的英文怎么写。five hundred and twenty英式音标:[faɪv] [ˈhʌndrəd] [ənd; (ə)n; ænd] [ˈtwe

知识

丁酉年祭太岁文怎么写

阅读(291)

本文主要为您介绍丁酉年祭太岁文怎么写,内容包括祭太岁怎么祭,祭太岁怎么祭,谢太岁疏文稿怎么写。祭拜太岁的方法:首先是贡品。如果在家里的神龛前祭拜,就要准备供养品。供品不在于价格大小,品种多少,只要清洁和心诚。一般是三杯茶酒,几件干

知识

饭店员工证明怎么写

阅读(246)

本文主要为您介绍饭店员工证明怎么写,内容包括在饭店上班的,怎么开工作证明跟收入证明,急,饭店员工怎么写请假条,开证明我是我是饭店员工住宿舍怎样开。饭店员工请假条饭店的请假条怎么写?下面是小编为大家搜集的饭店员工请假条,欢迎大家借鉴

知识

html提交按钮怎么写

阅读(286)

本文主要为您介绍html提交按钮怎么写,内容包括html中提交按钮和重置按钮代码,要怎么输入,HTML怎么实现文本框里加入一个提交按钮,html中提交按钮和重置按钮代码,要怎么输入还有留言的留言框求高。需要准备的材料分别有:电脑、浏览器、html编

知识

html5声明怎么写

阅读(206)

本文主要为您介绍html5声明怎么写,内容包括HTML5的文档声明方式,如何声明创建一个标准HTML5页面,下面哪个选项是html5的声明方式。<!DOCTYPE&gt; 声明必须位于 HTML5 文档中的第一行,也就是位于 <html&gt; 标签之前。该标签告知浏览器文档所使

知识

htmla标签怎么写

阅读(199)

本文主要为您介绍htmla标签怎么写,内容包括html的a标签是什么,HTML一个页面有多个a标签,怎么写才能让a标签显示不同的样式搜,HTMLa标签要怎么使用。HTML 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任

知识

html输入框怎么写

阅读(288)

本文主要为您介绍html输入框怎么写,内容包括HTML如图样式的输入框怎么写,html文本框代码怎么写,HTML登录输入框怎么写求大神帮助。1.单行文本框:<input type="text" style="height:20px;width:100px;" />2.多行文本

知识

java访问html文件路径怎么写

阅读(216)

本文主要为您介绍java访问html文件路径怎么写,内容包括java里文件路径怎么写,javasocket编程怎么访问本机上指定路径的html文件,javasocket编程怎么访问本机上指定路径的html文件。File file = new File("D:\\123.txt");你这种不用绝对路径

知识

html怎么写虚线

阅读(189)

本文主要为您介绍html怎么写虚线,内容包括如何用HTML5代码直接写虚线框,网页中用CSS做虚线,如何在html代码中画虚线。你把如下代码加入你的HTML文件的<head&gt;和</head&gt;之间。你就明白了<style type=text/css><!

知识

subline怎么写html

阅读(214)

本文主要为您介绍subline怎么写html,内容包括怎么用sublimetext写html代码,如何在sublinetext3中快速描写html的表头,sublimetext3怎么写html。首先我们去网上面下载sublime text3的软件,百度上有很多下载网站,随便一下一个下载的sublime tex

知识

html怎么写竖线

阅读(192)

本文主要为您介绍html怎么写竖线,内容包括怎么用HTML标签画一条竖线,如何用html设置竖线,HTML里竖线这个“|”符号怎么弄谢谢解答。想用它来划竖线,一般可以直接使用html代码实现或借助css代码来实现都可以。方案一:<html&gt;、<body&gt;、<p>h

[/e:loop]