【Canvas与艺术】绘制蓝色森麒麟轮胎
【关键点】
1.月牙高光的使用；
2.arcTo函数对于创造圆角的巧用。
【成果图】
【代码】
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>使用HTML5/Canvas绘制蓝色森麒麟轮胎</title> <style type="text/css"> .centerlize{ margin:0 auto; width:1200px; } </style> </head> <body onload="init();"> <div class="centerlize"> <canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;"> 如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试. </canvas> </div> </body> </html> <script type="text/javascript"> <!-- /***************************************************************** * 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中， * 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。 ******************************************************************/ // canvas的绘图环境 var ctx; // 高宽 const WIDTH=512; const HEIGHT=512; // 舞台对象 var stage; //------------------------------- // 初始化 //------------------------------- function init(){ // 获得canvas对象 var canvas=document.getElementById('myCanvas'); canvas.width=WIDTH; canvas.height=HEIGHT; // 初始化canvas的绘图环境 ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央 // 准备 stage=new Stage(); stage.init(); // 开幕 animate(); } // 播放动画 function animate(){ stage.update(); stage.paintBg(ctx); stage.paintFg(ctx); // 循环 if(true){ //sleep(100); window.requestAnimationFrame(animate); } } // 舞台类 function Stage(){ // 初始化 this.init=function(){ } // 更新 this.update=function(){ } // 画背景 this.paintBg=function(ctx){ ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 writeText(ctx,WIDTH/2-30,HEIGHT/2-6,"逆火原创","8px consolas","black");// 版权 } // 画前景 this.paintFg=function(ctx){ // 渐变色圆形实体 ctx.beginPath(); ctx.arc(0,0,240,0,Math.PI*2,false); ctx.closePath(); var lgrd=ctx.createLinearGradient(0,-240,0,240); lgrd.addColorStop(0,"rgb(1,152,225)"); lgrd.addColorStop(1,"rgb(1,97,139)"); ctx.fillStyle=lgrd; ctx.fill(); // 月牙状白色高光 var radius=220; var angle=Math.PI/6; ctx.beginPath(); ctx.arc(0,0,radius,Math.PI*3/2-angle,Math.PI*3/2+angle,false); ctx.arc(0,radius,2*radius*Math.cos(angle/2),-Math.PI/2+angle/2,-Math.PI/2-angle/2,true); ctx.fillStyle="white"; ctx.fill(); // 白圈 ctx.beginPath(); ctx.arc(0,0,160,0,Math.PI*2,false); ctx.closePath(); ctx.fillStyle="white"; ctx.fill(); // 轮胎纹 var R=160; for(var i=0;i<36;i++){ var theta=i*Math.PI*2/36; var outer=createPt(R*Math.cos(theta),R*Math.sin(theta)); ctx.save(); ctx.translate(outer.x,outer.y); ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(0,-2); ctx.lineTo(-15,0); ctx.lineTo(0,2); ctx.closePath(); ctx.fillStyle="rgb(0,122,185)"; ctx.fill(); ctx.restore(); } // 轮毂外圈 ctx.beginPath(); ctx.arc(0,0,110,0,Math.PI*2,false); ctx.closePath(); ctx.lineWidth=6; ctx.strokeStyle="rgb(0,122,185)"; ctx.stroke(); // 轮毂六瓣 var r=96; for(var i=0;i<6;i++){ var theta=i*Math.PI*2/6; var start=theta-Math.PI/36*5; var startPt=createPt(r*Math.cos(start),r*Math.sin(start)); var end=theta+Math.PI/36*5; var endPt=createPt(r*Math.cos(end),r*Math.sin(end)); var midPt=createPt(40*Math.cos(theta),40*Math.sin(theta)); ctx.beginPath(); ctx.arc(0,0,r,start,end,false); ctx.arcTo(midPt.x,midPt.y,startPt.x,startPt.y,16); ctx.closePath(); ctx.lineWidth=6; ctx.lineJoin="round"; ctx.strokeStyle="rgb(0,122,185)"; ctx.stroke(); } // 六个圆点 var r=30; for(var i=0;i<6;i++){ var theta=i*Math.PI*2/6+Math.PI/6; var midPt=createPt(r*Math.cos(theta),r*Math.sin(theta)); ctx.beginPath(); ctx.arc(midPt.x,midPt.y,5,0,Math.PI*2,false); ctx.closePath(); ctx.fillStyle="rgb(0,122,185)"; ctx.fill(); } // 中心圆点 ctx.beginPath(); ctx.arc(0,0,15,0,Math.PI*2,false); ctx.closePath(); ctx.fillStyle="rgb(0,122,185)"; ctx.fill(); } } /*---------------------------------------------------------- 函数:创建一个二维坐标点 x:横坐标 y:纵坐标 Pt即Point ----------------------------------------------------------*/ function createPt(x,y){ var retval={}; retval.x=x; retval.y=y; return retval; } /*---------------------------------------------------------- 函数:延时若干毫秒 milliseconds:毫秒数 ----------------------------------------------------------*/ function sleep(milliSeconds) { const date = Date.now(); let currDate = null; while (currDate - date < milliSeconds) { currDate = Date.now(); } } /*---------------------------------------------------------- 函数:书写文字 ctx:绘图上下文 x:横坐标 y:纵坐标 text:文字 font:字体 color:颜色 ----------------------------------------------------------*/ function writeText(ctx,x,y,text,font,color){ ctx.save(); ctx.textBaseline="bottom"; ctx.textAlign="center"; ctx.font = font; ctx.fillStyle=color; ctx.fillText(text,x,y); ctx.restore(); } /*------------------------------------------------------------- 下面是一首近年来最该上村晚却又会被相关领导第一时间否决的歌曲 拾柒兄弟 - 《加糖都不甜的生活》 作词：张新华@爱意扬 作曲：张新华@爱意扬 编曲：高兴 制作人：龙小晨 吉他：许明清 和声：钟摆柳 混音：边策 这生活好难 加糖都不甜 我卖了理想换来了柴米油盐 早出晚归的工作 一个人住在十平米的小窝 三十好几了 没有灵魂的伴侣 怕的是人家在乎房子和车 鸡零狗碎的生活 总日复一日地重复着 越过了一座山又出现一道坡 为何这脚下的路尽是坎坷 这生活好难 加糖都不甜 我卖了理想换来了柴米油盐 想出人头地 却难如登天 十分的愁楚只能往肚子里咽 这生活好难 加糖都不甜 我卖了抱负换来了一日三餐 总自命不凡 却傻得可怜 再多的辛酸只能委屈求全 鸡零狗碎的生活 总日复一日地重复着 越过了一座山又出现一道坡 为何这脚下的路尽是坎坷 这生活好难 加糖都不甜 我卖了理想换来了柴米油盐 想出人头地 却难如登天 十分的愁楚只能往肚子里咽 这生活好难 加糖都不甜 我卖了抱负换来了一日三餐 总自命不凡 却傻得可怜 再多的辛酸只能委屈求全 这生活好难 加糖都不甜 我卖了理想换来了柴米油盐 想出人头地 却难如登天 十分的愁楚只能往肚子里咽 这生活好难 加糖都不甜 我卖了抱负换来了一日三餐 总自命不凡 却傻得可怜 再多的辛酸只能委屈求全 --------------------------------------------------------------*/ //--> </script>
END
