html5 js canvas中画星星的函数

function drawStar(cxt, x, y, outerR, innerR, rot) {
             cxt.beginPath();
             for (var i = 0; i < 5; i++) {
                 cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x,
                 -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y);
                 cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,
                     -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);
             }
             cxt.closePath();

             cxt.fillStyle = "#fb3";
             cxt.strokeStyle = "#fd5";
             cxt.lineWidth = 3;
             cxt.lineJoin = "rount";

             cxt.fill();
             cxt.stroke();
         }
function draw() {
             for (var i = 0; i < 200; i++) {
                 var r = Math.random() * 10 + 10;
                 var x = Math.random() * cvs.width;
                 var y = Math.random() * cvs.height;
                 var a = Math.random() * 360;
                 drawStar(context, x, y, r, r / 2.0, a);
             }
         }
时间: 2024-10-06 02:23:07

html5 js canvas中画星星的函数的相关文章

[转]html5 Canvas画图教程(9)—canvas中画出矩形和圆形

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形.当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟. canvas画矩形 1,fillRect与strokeRect fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式:同理strokeRect就是直接描边一个矩形 他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高).这里的起点,注意,是指矩形的左上角那个点. 我们通常用他们来做简单的事,他们也只能做简单的事.为什

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5 在canvas中绘制复杂形状

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath()  : 开始绘制一个新路径. closePath()  : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke()  : 填充形状或绘制空心形状. moveTo()  : 将当前点移动到点(x,y). lin

HTML5 在canvas中绘制矩形

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清

HTML5 在canvas中绘制文本

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/33333519 一.绘制文本 在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fillText(text,x,y) : (x,y)处绘制实心的文本. 二.在canvas中绘制文本 <!DOCTYPE html> <html> <head> <meta http-e

Unity使用UGUI的Image在Canvas中画直线

效果图 核心代码 using System; using UnityEngine; using UnityEngine.UI; public class TestDrawLine : MonoBehaviour { public Image arrow; //Image 素材 public RectTransform pa; //A点 public RectTransform pb; //B点 private void Start() { var rP = pa.rectTransform().

【HTML5】Canvas中的tranform变换矩阵

在Canvas中有个方法比较特殊,不同于画笔中其他各种旋转,而是一种矩阵变换,方法名为tranform. 调用示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/

Html5用Canvas制作画图板

需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到的是找现成的改一改,找来找去,就认为fabricjs还能够,只是研究了一下,发现样例太少,非常难短时间内上手 想到了近期一直想研究确没时间看的Html5,正巧之前也买了一本关于Canvas游戏开发的书,想试试看,没想到非常快就上手了 结果: 一天半时间完毕,效果例如以下: 注意: 不要使用style

[转]html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

继续讲canvas中画曲线的方法,今天讲quadraticCurveTo. 说实话这个方法有点吓人,单从函数名称上都可以初体验.话说,我觉得有必要把这个函数名缩短. quadratic的意思是二次,即数学中二次元方程那个二次.而ctx.quadraticCurveTo的参数如下: 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定. 我之所以把控制点的坐标带上