html5 canvas从圆开始
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >html5 canvas从圆开始</ title > < script src="js/modernizr.js"></ script > </ head > < body > < script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document.getElementById('canvas') var context = theCanvas.getContext("2d") } drawScreen(); function drawScreen(){ //颜色粉色,线宽10, context.beginPath(); context.strokeStyle="pink"; context.lineWidth=10; context.arc(100,100,20,(Math.PI/180)*0,(Math.PI/180)*360,false); //100,100圆心的位置 //20半径 //开始喝结束的弧度制从0-360 //1弧度 = π/180°弧度不是角度哦 //true和false对象弧线方向 context.stroke(); context.closePath(); context.beginPath(); context.arc(200,100,20,(Math.PI/180)*0,(Math.PI/180)*90,false); context.stroke(); context.closePath(); context.beginPath(); context.arc(300,100,20,(Math.PI/180)*0,(Math.PI/180)*90,true); context.stroke(); context.closePath(); } } </ script > < canvas id="canvas" width="500" height="500"> 你的浏览器无法使用canvas 如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!! </ canvas > </ body > </ html > |
额,写上这一段的时候主要还是不明白,好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受,顺便可以知道自己的不足点。。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步