学习canvas笔记，demo1，画个图标

来源：互联网发布：跨平台数据库开发工具编辑：程序博客网时间：2024/05/20 08:41

<img src="http://img.blog.csdn.net/20160629163650979?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />凭感觉画的，没什么美感，完全是代码堆积上去的，也没抽象成可用的方法。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo1</title></head><body><canvas id='can' width="200px" height="250px"></canvas><script>var $can = document.getElementById('can');function painLine(){var ctx = $can.getContext('2d');var r = 80;ctx.beginPath();ctx.fillStyle = '#1e78e7';ctx.arc(100,100,80,0,Math.PI*2,false);ctx.fill();ctx.closePath();var dig = Math.PI*2 / 12;var poinB = {x: Math.sin(dig*3/2-Math.PI/2)*80+100,y: Math.cos(dig*3/2-Math.PI/2)*80+100};var poinM = {x: Math.sin(dig*3-Math.PI/2)*80+100,y: Math.cos(dig*3-Math.PI/2)*80+100};var poinE = {x: Math.sin(dig*9/2-Math.PI/2)*80+100,y: Math.cos(dig*9/2-Math.PI/2)*80+100};ctx.beginPath();ctx.fillStyle = '#1e78e7';ctx.moveTo(poinB.x, poinB.y);ctx.lineTo(poinM.x, poinM.y+27);ctx.lineTo(poinE.x, poinE.y);ctx.lineTo(poinB.x, poinB.y);ctx.fill();ctx.closePath();var pointLT = {x: 100-r/2,y: 100-r/2}var radius = r/8;ctx.beginPath();ctx.moveTo(pointLT.x*1+radius, pointLT.y);ctx.arcTo(pointLT.x*1+r, pointLT.y,pointLT.x*1+r, pointLT.y*1+r,radius);ctx.arcTo(pointLT.x*1+r, pointLT.y*1+r, pointLT.x, pointLT.y*1+r,radius);ctx.arcTo(pointLT.x, pointLT.y*1+r, pointLT.x, pointLT.y,radius);ctx.arcTo(pointLT.x,pointLT.y,pointLT.x*1+radius,pointLT.y,radius);ctx.fillStyle = '#fff';ctx.fill();ctx.closePath();ctx.beginPath();ctx.moveTo(pointLT.x*1+r, pointLT.y*1+r-radius);ctx.lineTo(pointLT.x*1+r+3, pointLT.y*1+r+2);ctx.lineTo(pointLT.x*1+r-radius, pointLT.y*1+r);ctx.lineTo(pointLT.x*1+r, pointLT.y*1+r-radius);ctx.fillStyle = '#fff';ctx.fill();ctx.closePath();var pointLTLeft = {x: 100-r/5,y: 100-r/10}ctx.beginPath();ctx.moveTo(pointLTLeft.x*1+4, pointLTLeft.y);ctx.arcTo(pointLTLeft.x*1+8, pointLTLeft.y,pointLTLeft.x*1+8, pointLTLeft.y*1+8,4);ctx.arcTo(pointLTLeft.x*1+8, pointLTLeft.y*1+18, pointLTLeft.x, pointLTLeft.y*1+18,4);ctx.arcTo(pointLTLeft.x, pointLTLeft.y*1+18, pointLTLeft.x, pointLTLeft.y,4);ctx.arcTo(pointLTLeft.x,pointLTLeft.y,pointLTLeft.x*1+4,pointLTLeft.y,4);ctx.fillStyle = '#1e78e7';ctx.fill();ctx.closePath();var pointLTRight = {x: 100+r/10,y: 100-r/10}ctx.beginPath();ctx.moveTo(pointLTRight.x*1+4, pointLTRight.y);ctx.arcTo(pointLTRight.x*1+8, pointLTRight.y,pointLTRight.x*1+8, pointLTRight.y*1+8,4);ctx.arcTo(pointLTRight.x*1+8, pointLTRight.y*1+18, pointLTRight.x, pointLTRight.y*1+18,4);ctx.arcTo(pointLTRight.x, pointLTRight.y*1+18, pointLTRight.x, pointLTRight.y,4);ctx.arcTo(pointLTRight.x,pointLTRight.y,pointLTRight.x*1+4,pointLTRight.y,4);ctx.fillStyle = '#1e78e7';ctx.fill();ctx.closePath();}painLine();</script></body></html>

0 0