html5中怎么做五角星

编程之家收集整理的这篇文章主要介绍了html5中怎么做五角星编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在@R_301_5984@中,可以通过canvas标签以及相关的JavaScript属性方法来画五角星;canvas标签用于通过脚本(通常是JavaScript)动态绘制图形。

教程操作环境windows7系统、@R_301_5984@版、Dell G3电脑。

<canvas></canvas>是@R_301_5984@中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了@R_301_5984@ canvas基本绘图之绘制五角星方法,感兴趣的小伙伴们可以参考一下

<canvas></canvas>是@R_301_5984@中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器,除了ID、class、style等属性外,还有height和wIDth属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

通过对五角星分析,我们可以确定各个顶点坐标的规律,这里需要注意的一点是:在canvas中,Y轴的方向是向下的。

1.jpg

相应代码如下:

var canvas = document.getElementByID("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标,根据顶点制定路径   
    for (var i = 0; i < 5; i++) {   
        context.lineto(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineto(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色   
    context.linewidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();

最后效果

2.jpg

更多编程相关知识,请访问:编程视频!!

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的html5中怎么做五角星全部内容,希望文章能够帮你解决html5中怎么做五角星所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML相关文章

一、案例效果二、欢迎界面的设计与功能2.1 、案例效果设计一个倒计时自动跳转的页面2.2、 布局界面 activity_welcome.xml 参考代码:&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schem...
这里记录一下做网易云小程序的音乐播放详情页面的代码。音乐播放界面的主要的重点有几个: 1、磁盘和摇杆的旋转效果,这里运用了css的动画属性 2、音乐播放和暂停,下一首/上一首等播放效果的实现 3、进度条的样式和控制 4、和上一页音乐推荐列表页通信,利用订阅与发布PubsubHTML&lt;!--pages/songDetail/songDetail.wxml--&gt;&lt;view class="songDetailContainer"&gt; &lt...
Unity中的 浏览器插件:3D WebView,利用好该插件我们可以自己使用Unity打造出一个自定义的多样化浏览器。可以用于2D显示,也可以用于3D空间场景中使用,在PC端、手机端和VR设备等都可以有一个非常好的效果。一起来浏览器插件:3D WebView的专栏学习使用吧!
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body { background-image: url("./1.png"); } &lt;/style&gt;&lt;/head&gt;&lt;body.
TBS天杀的集成大坑拯救之路
首先确定是在什么环境下不展示图片,确定你的标签是&lt;img&gt;还是&lt;image&gt;,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。一、引用本地文件中存储的图片(1)真机环境(2)网页环境二、引用localhost或者127的本地服务器图片(1)真机环境(2)网页环境三、引用本地服务器开启的端口的图片(1)真机环境(2)网页环境四、富文本...
效果鸿蒙2.0 android app内部效果方法内置组件&lt;web-view src="https://baidu.rudon.cn/"&gt;&lt;/web-view&gt;&lt;template&gt; &lt;view&gt; &lt;web-view src="https://baidu.rudon.cn/"&gt;&lt;/web-view&gt; &lt;/view&gt;&lt;/template&gt;详见web-view | u
eg:方法一:在XML中进行更改&lt;Button android:id="@+id/B" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="提交按钮2" android:textColor="@color/white" android:textSize="30dp" android:backgroundTin.
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注