先来张效果图:
再来张五角星各个点坐标的计算过程图:
最后上代码:
window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = document.documentElement.clientWidth-20;; myCanvas.height = document.documentElement.clientHeight-20;; var context =myCanvas.getContext("2d"); //绘制一个五角星 //alert(myCanvas.width+"\t"+myCanvas.height);1420/720 //dramStar(context,300,150,300,300,3,"#fb3","#fd5",20); //绘制更多的星星 var colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];//绘制各种颜色的星星 //colors="#fd5";//绘制一种颜色的星星 drawMoreStars(context,200,10,colors); }else{ return false; } } /** *该方法用来绘制五角星(五角星的绘制可以理解成在两个大圆中绘图) *@param cxt:canvas的上下文环境 *@param R1:大圆的半径,用来绘制向外的五个点 *@param R2:小圆的半径,用来绘制向内的五个点 *@param x:在x方向的偏移量,若是不设置,默认为0,做左上角进行绘制 *@param y:在y方向的偏移量,若是不设置,默认为0,做左上角进行绘制 *@param lineWidth:边线粗细 *@param lineColor:边线颜色 *@param fillColor:五角星的填充色 *@param rot:旋转角度 */ function dramStar(cxt,R1,R2,x,y,lineWidth,lineColor,fillColor,rot){ //绘制五角星 cxt.beginPath(); for(var i=0;i<5;i++){ //绘制大圆中的五个角 //第一个角为18度,以后大圆的每个角都是(18+72的倍数)度 //(18+i*72)/180*Math.PI:将角度转换成弧度 //因为绘制五角星的坐标系y轴与普通的坐标系相反,x轴以上为负数,x轴以下为正数,所以此处y轴的坐标为负数 cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R1+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R1+y); //绘制小圆中的五个角 //与大圆的各个角一致,第一个角为54度,以后每个角都是(54+72的倍数)度 cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*R2+x,-Math.sin((54+i*72-rot)/180*Math.PI)*R2+y); } cxt.closePath(); cxt.lineWidth=lineWidth;//边框线粗细 cxt.fillStyle=fillColor;//填充色 cxt.strokeStyle=lineColor;//设置边框线的颜色 cxt.lineJoin="round";//边角 //先填充,后描边 cxt.fill(); cxt.stroke(); } /** *该方法用来绘制各种颜色的星星 *@param cxt:canvas的上下文环境 *@param num:绘制的星星的数量 *@param radius:星星半径,以后随机生成半径会在radius与2*radius之间 *@param colors:颜色,可能是数组,也可能只是一个颜色 **/ function drawMoreStars(cxt,num,radius,colors){ //绘制一个背景色 cxt.fillStyle="black"; cxt.fillRect(0,0,myCanvas.width,myCanvas.height);//绘制一个与当前画布一样大的矩形,背景色为fillStyle设置的颜色 //绘制一片星空 var color="white";//默认为白色的星星 for(var i=0;i<num;i++){ var R1 = Math.random()*radius+radius;//大圆直径20-40之间 var R2 = R1/2;//小圆半径 var x = Math.random()*myCanvas.width;//x轴的偏移量 //左侧不出界 if(x<R1)x=R1; //右侧不出界 if(x>=myCanvas.width-R1){x=myCanvas.width-R1;} var y = Math.random()*myCanvas.height;//y轴的偏移量 //上面不出界 if(y<R1) y=R1; //下面不出界 if(y>=myCanvas.height-R1){y=myCanvas.height-R1;} if(isArray(colors)){//给定的是数组,那么从数组中随机获取一个颜色 color=colors[Math.floor(Math.random()*colors.length)];//星星的颜色 }else{//只是一个颜色,直接设置就好 color=colors; } //alert(x+"\t"+myCanvas.width+"\t"+R1+"\n"+y+"\t"+myCanvas.height); var rot = Math.random()*360;//旋转角度在0-360度之间 dramStar(cxt,R1,R2,x,y,0,color,color,rot); } } //判断是否为数组 var isArray = function(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; };
最后感谢老师的分享!
相关推荐
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
它不仅全面讲解了canvas元素的API,以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发,还包含大量实例,可操作性极强。 《HTML5 Canvas核心技术:图形、动画与游戏开发...
HTML5 Canvas核心技术:图形、动画与游戏开发 mobi
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 Canvas核心技术:图形、动画与游戏开发 - (美)基瑞(Geary,D.)著
为Zense HacKnight 2K19开发 作者 萨特维克(Satvik Ramaprasad) Shubhayu Das 罗希特·卡特拉(Rohit Katlaa) Prajwal Agarwal 吉什努·库马尔(Jishnu Kumar) ...canvas.drawMode :填充形状或仅绘制边框
画布注意:Canvas.ts仍在早期开发中,尚未准备就绪。 功能缺失,并且会发生错误。
html5 canvas表示我爱你:玫瑰花动画,非常逼真的玫瑰花,你相信这是用Canvas画出来的吗?不但需要HTML5技术,而且还需要有绘画工底哦,这朵玫瑰花还带有枝叶,非常佩服哦。
它不仅全面讲解了Canvas元素的API,以及如何利用Canvas进行图形绘制、动画制作、物理效果模拟、碰撞检测、游戏开发、移动应用开发,还包含大量实例:可操作性极强。 《HTML5Canvas核心技术:图形动画与游戏开发》...
HTML5 Canvas核心技术 图形、动画与游戏开发
这是一款使用HTML5 canvas制作的DOM元素背景梦幻小星星闪烁动画特效。该特效可以在任何HTML DOM元素上通过canvas来在鼠标滑过时制作星星闪烁的效果,可以为元素添加一些梦幻色彩。
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
canvas-demo 本示例是源于项目的一个需求做的一个demo。初衷只是为了实现通过拖拽绘制用户所需大小的矩形,后面就继续完善了一下功能。目前实现了通过拖拽绘制矩形、移动画布上现有的矩形、保存当前画布、撤销与...
渲染器CanvasLatex的编写方式应支持任何基于Canvas的渲染器。 NodeBuilder创建作为渲染器不可知模型的“ VirtualCanvasNodes”。 当前支持的渲染器包括: 创建JS PixiJS 将来的渲染器支持可能包括: ThreeJS(3D渲染...
源码+简要报告
canvas-study:学习帆布
HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...
使用方法npm 下载使用npm i -S @sayll/canvas_x// js 片段import canvas_x from '@sayll/canvas_x'// TODOcanvas_x.makeImage({...})直接引用可直接通过script标签引入lib/canvas_x.js,也可当第三方模块引入。...
HTML5 Canvas核心技术—图形、动画与游戏开发 一书的示例代码,里面应用很丰富,是初学者学习html5游戏开发的好资料。