1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="canvas" style="margin:0 auto;">
  9.         The current browser does not support Canvas, can replace the browser a try!
  10.     </canvas>
  11.  
  12.     <script>
  13.  
  14.         window.onload = function(){
  15.             var canvas = document.getElementById('canvas');
  16.  
  17.             canvas.width = 1024;
  18.             canvas.height = 768;
  19.  
  20.             if(canvas.getContext('2d')){
  21.                 var context = canvas.getContext('2d');
  22.  
  23.                 context.fillStyle = "#000";
  24.                 context.fillRect(0,0,canvas.width,canvas.height)
  25.  
  26.                 for(var i=0;i<200;i++){
  27.                     var r = Math.random() * 10 + 10;
  28.                     var x = Math.random() * canvas.width;
  29.                     var y = Math.random() * canvas.height;
  30.                     var a = Math.random() * 360;
  31.  
  32.                     drawStar(context , x , y , r , a )
  33.                 }
  34.  
  35.             }else{
  36.                 alert('当前游览器不支持Canvas，请更换游览器后再试！');
  37.             }
  38.         }
  39.  
  40.         function drawStar(cxt,x,y,R,rot){
  41.             cxt.save();
  42.  
  43.                 cxt.translate(x,y);
  44.                 cxt.rotate(rot/180*Math.PI);
  45.                 cxt.scale(0.05*R,0.05*R)
  46.  
  47.                 starPath(cxt);
  48.  
  49.                 cxt.fillStyle = "#fb3";
  50.                 cxt.strokeStyle = "#fd5";
  51.                 cxt.lineWidth = 3;
  52.                 cxt.lineJoin = "round";
  53.  
  54.                 cxt.fill();
  55.                 cxt.stroke();
  56.  
  57.             cxt.restore()
  58.         }
  59.  
  60.         function starPath(cxt){
  61.  
  62.             cxt.beginPath();
  63.             for(var i=0;i<5;i++){
  64.                 cxt.lineTo(Math.cos( (18+i*72) / 180 * Math.PI )*20,
  65.                                 -Math.sin( (18+i*72) / 180 * Math.PI )*20);
  66.                 cxt.lineTo(Math.cos( (54+i*72) / 180 * Math.PI )*0.5*20,
  67.                                 -Math.sin( (54+i*72) / 180 * Math.PI )*0.5*20);
  68.             }
  69.             cxt.closePath();
  70.         }
  71.     </script>
  72. </body>
  73. <script>
  74.     /*图形变换
  75.  
  76.         位移 translate(x,y)
  77.  
  78.         旋转 rotate(deg)
  79.  
  80.         缩放 scale(sx,sy)
  81.  
  82.     */
  83. </script>
  84. </html>

canvas-star2.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择

    原文: http://gitbook.liuhui998.com/5_5.html 如果你要查看文件的每个部分是谁修改的, 那么 git blame 就是不二选择. 只要运行'git blame [f ...

  2. EF db first 获取表名称

    一直以来,使用DB FIRST的方式,想得到表名,最后一直不得其法.直到昨天晚上,反编译自己的程序集的时候,突然发现EF表结构和数据实体类的映射关系存在什么地方.然后就有了这篇文章. 咱们一步步来. ...

  3. LINK1104:无法打开文件"\.obj"原因及解决办法

    那是由于具有空文件名的库导致的,只需要检查一下配置信息把出现空文件名的地方进行改正就可以了. 作者:耑新新,发布于  博客园 转载请注明出处,欢迎邮件交流:zhuanxinxin@foxmail.co ...

  4. 对 UDP 的一些思考

    先放两个链接 快速可靠协议-KCP 可靠 UDP 传输 最近在玩王者荣耀,发觉两件事: 1. 可以 4G 和 wifi 无痛切换 2. 当网络不好的时候,发出去的消息并不保证到达服务器.比如你在很卡的 ...

  5. HTML和CSS使用注意事项

    HTML 1.button标签 在IE中,button标签默认的type是button,而在其他浏览器和W3C标准中button默认的属性都是submit. 所以,在一个form表单中,如果butto ...

  6. Servlet案例1：用户登录

    数据库准备: CREATE DATABASE web; USE web; CREATE TABLE users( id INT PRIMARY KEY AUTO_INCREMENT, username ...

  7. Swift5 语言指南(十四) 下标

    类,结构和枚举可以定义下标,下标是用于访问集合,列表或序列的成员元素的快捷方式.您可以使用下标按索引设置和检索值,而无需单独的设置和检索方法.例如,您可以访问在元素Array实例作为someArray ...

  8. Swift5 语言指南(三) 快速之旅

    传统表明,新语言中的第一个程序应在屏幕上打印“Hello,world!”字样.在Swift中,这可以在一行中完成: print("Hello, world!") // Prints ...

  9. Spring boot MultipartResolver

    [参考文章]:Required MultipartFile parameter 'file' is not present [参考文章]:Springboot2.0中WebMvcConfigurerA ...

  10. POJ 2895

    #include <iostream> #include <string> #define MAXN 27 using namespace std; short map[MAX ...