<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body onload="star()">
<canvas id="canvas" width="800" height="500" style="border: 1px #ccc solid;"></canvas> </body>
</html>
<script>
function star(){
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
cxt.translate(100,100);
var s=50;
cxt.beginPath();
cxt.fillStyle="blue";
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);
cxt.lineTo(x*s,y*s);
}
cxt.closePath();
cxt.fill();
}
</script>


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

  1. canvas绘制五角星详细过程

    canvas绘制 <canvas id="straight"></canvas> <script> var canvas = document. ...

  2. HTML5 Canvas 绘制五角星

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. Canvas绘制五角星

    from tkinter import * import math as m root = Tk() w = Canvas(root, width=200, height=100, backgroun ...

  4. html5 canvas绘制圆形印章,以及与页面交互

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 canvas 绘制五星红旗

    这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...

  6. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  7. HTML5 Canvas ( 绘制一片星空 )

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  9. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

随机推荐

  1. oracle取分组的前N条数据

    select * from(select animal,age,id, row_number()over(partition by animal order by age desc) row_num ...

  2. window.showDialog()兼容性处理

    ModalDialog 是什么? showModalDialog 是js window对象的一个方法, 和window.open一样都是打开一个新的页面. 区别是: showModalDialog打开 ...

  3. jeasyui制作计划-ajax学习

    Ajax:可以无刷新状态更新页面,并且实现异步提交,提升了用户的体验. 1.load()函数的使用,可以三个参数:url(必须的参数,请求html文件的url地址,参数类型string).date(可 ...

  4. (原+转)ROC曲线

    转自:http://baike.baidu.com/link?url=_H9luL0R0BSz8Lz7aY1Q_hew3JF1w-Zj_a51ggHFB_VYQljACH01pSU_VJtSGrGJO ...

  5. jQuery + css 公告从左往右滚动

    $(function() { // 公告滚动 $(".notice-content").textScroll(); }); /** * 从右往左滚动文字 * @returns {u ...

  6. Python 整理一

    ---恢复内容开始--- Python (pailen)最近学习这个语言,其实早在几年前学习perl的时候就知道有这个语言了,在讲perl的那本书后面就推荐学习python,并且还附加了二章的入门.当 ...

  7. AspectJ截获操作

    package com.example.aspectjandroidtest; import java.io.BufferedOutputStream; import java.io.ByteArra ...

  8. 英特尔发布全新英特尔® INDE 2015工具套件

    2014年10月15日,英特尔发布了全新的英特尔® Integrated Native Developer Experience 2015工具套件(简称英特尔® INDE).该产品提供了一系列最佳工具 ...

  9. Canvas的补充

    一.Canvas.save()作用:让后续的操作就好像在一个新图层上. 二.Canvas.restore():让之前save()产生的图层全部合并. 三.Canvas.translate():将原点( ...

  10. Zend Framework 框架搭建

    通过手工方法搭建Zend Framework的MVC框架结构.首先看一下zend framework mvc的目录结构 1. 在根目录下面创建 public ,并在 public 下创建 index. ...