首页 > 代码库 > Canvas -
Canvas -
<!doctype html><html><head> <title> </title></head><style></style><body> <canvas width=="500" height="500" id="demo"> 您的浏览器不支持canvas！ </canvas> <script> var canvas = document.getElementById(‘demo‘); // alert(canvas); var ctx = canvas.getContext(‘2d‘); //alert(ctx) ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,10); ctx.closePath(); ctx.stroke();//end ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(100,70); ctx.closePath(); ctx.stroke();//end ctx.beginPath(); ctx.moveTo(200,10); ctx.lineTo(290,60); ctx.closePath(); ctx.stroke();//end ctx.beginPath(); ctx.moveTo(100,70); ctx.lineTo(290,60); ctx.closePath(); ctx.stroke();//end ctx.beginPath(); ctx.arc(150, 100, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //左空心眼睛 ctx.beginPath(); ctx.arc(120, 100, 10, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //右空心眼睛 ctx.beginPath(); ctx.arc(150, 100, 10, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //右实心眼睛 ctx.beginPath(); ctx.arc(150, 100, 3, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.fillStyle = "#000000"; ctx.fill(); ctx.shadowOffsetX = 0; // 设置水平位移 ctx.shadowOffsetY = 0; // 设置垂直位移 ctx.shadowBlur = 10; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色 ctx.closePath(); ctx.stroke(); //左实心眼睛 ctx.beginPath(); ctx.arc(120, 100, 3, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.fill(); ctx.shadowOffsetX = 0; // 设置水平位移 ctx.shadowOffsetY = 0; // 设置垂直位移 ctx.shadowBlur = 10; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色 ctx.closePath(); ctx.stroke(); //嘴 ctx.beginPath(); ctx.arc(135 , 130, 10, 10, false); ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); //线 帽子线 ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,70); ctx.lineTo(100,150); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(200,10); ctx.lineTo(200,100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(290,60); ctx.lineTo(290,130); ctx.closePath(); ctx.stroke(); </script> </body></html>
Canvas -
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。