代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>五角星</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="200px" height="200px" style="border:0px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var context=canvas.getContext("2d");

        context.fillStyle = "yellow";
        context.fillRect(0, 0, 200, 200);

        context.strokeStyle = "rgb(250,0,0)";
        context.fillStyle = "rgb(250,0,0)"

        context.beginPath();
        context.moveTo(100, 0);
        context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
        context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
        context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
        context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
        context.lineTo(100, 0);
        context.fill();
        context.stroke();
        context.closePath();
    }
//-->
</script>

HTML5 Canvas 绘制五角星的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. HDU3977 Evil teacher 求fib数列模p的最小循环节

    In the math class, the evil teacher gave you one unprecedented problem! Here f(n) is the n-th fibona ...

  2. caffe-dnnh实验

    下面是我在做基于深度哈希的大规模图像检索中的一个实验,相关文档介绍给大家,具体内容查看提供的相关链接,总结的很到位了,我就不再赘述. 实践cvpr2015年的深度哈希图像检索论文:Simultaneo ...

  3. mysql物理备份恢复 xtrabackup 初试

    听闻xtrabackup开源且强大 2018-03-06 11:54:41 在官网下载安装了最新的2.4.9版本 网上文章都用的innobackupex,但是最新版已经抛弃了,自己看看手册<Pe ...

  4. mapserver+QGIS+openlayers的安装和配置

    1.下载MS4W,不要怀疑MS4W就是mapserver,只是里面集成了一些其他的工具和库,下载地址:http://www.maptools.org/ms4w/index.phtml?page=dow ...

  5. [nowcoder_Wannafly挑战赛4_F]线路规划

    [nowcoder_Wannafly挑战赛4_F]线路规划 试题描述 Q国的监察院是一个神秘的组织. 这个组织掌握了整个帝国的地下力量,监察着Q国的每一个人. 监察院一共有 \(N\) 个成员,每一个 ...

  6. [HNOI2008][bzoj1009] GT考试 [KMP+矩阵快速幂]

    题面 传送门 思路 首先,如果$n$和$m$没有那么大的话,有一个非常显然的dp做法: 设$dp[i][j]$表示长度为i的字符串,最后j个可以匹配模板串前j位的情况数 那么显然,答案就是$\sum_ ...

  7. HDR 高动态范围图像

    以下来源于百度百科: 高动态范围图像(High-Dynamic Range,简称HDR),相比普通的图像,可以提供更多的动态范围和图像细节,根据不同的曝光时间的LDR(Low-Dynamic Rang ...

  8. [bzoj 3048] [Usaco2013 Jan]Cow Lineup

    [bzoj 3048] [Usaco2013 Jan]Cow Lineup Description 给你一个长度为n(1<=n<=100,000)的自然数数列,其中每一个数都小于等于10亿 ...

  9. 倒计时 服务器时间 .NET js javascript

    原文发布时间为:2011-02-07 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  10. Page_Load与Page_PreRender的执行顺序

    原文发布时间为:2009-10-25 -- 来源于本人的百度文章 [由搬家工具导入] Page_PreRender 服务器控件将要呈现给其包含的 控件时发生。简单的理解为page中的控件渲染调用此事件 ...