canvas-基本用法

“A little bit of progress every day. ”

前言

刚好这几天公司要画一些图表,个人还没有怎么去认真用canvas画过什么东西,这里就把基本图形画法统计了下。

JAVASCRIPT
function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = "#ff5256"; //设置填充颜色 ctx.strokeStyle ="#999"; //设置描边颜色 ctx.lineWidth = 4 //设置描边宽度 ctx.lineCap = "round" //设置描边末端为圆滑 ctx.lineJoin = "round" //设置连部分末端为圆滑 //画正方形 ctx.fillRect(25,25,100,100);//绘制一个边长为100px的黑色正方形(距离上25px 左25px) ctx.clearRect(45,45,60,60); //擦除了一个60*60px的正方形 ctx.strokeRect(50,50,50,50);//画一个50*50px的黑色边框正方形 //添加线性渐变 var lingrad = ctx.createLinearGradient(0,0,0,125); //添加一个0,0到0,125高度的线性渐变 lingrad.addColorStop(0 , '#ff0000'); lingrad.addColorStop(1 , '#0000ff'); ctx.fillStyle = lingrad; //画三角形 ctx.beginPath(); ctx.moveTo(160,125); ctx.lineTo(220,25); ctx.lineTo(280,125); ctx.fill(); //画圆形 ctx.beginPath(); ctx.arc(375,75,50,0,Math.PI*2,true);//画一个圆心坐标(375*75px)半径50px的圆弧,从0开始到Math.PI*2结束,按照顺时针方向。 ctx.stroke(); //二次贝赛尔曲线 ctx.beginPath(); ctx.moveTo(460,125); ctx.quadraticCurveTo(520,0,580,125);//控制点坐标(520*0px) 结束点坐标(580*125px)的二次贝赛尔曲线 ctx.stroke(); //三次贝赛尔曲线 ctx.beginPath(); ctx.moveTo(610,125); ctx.bezierCurveTo(620,70,720,70,730,125);//控制点1坐标(620*70px) 控制点2坐标(720*70px) 结束点坐标(730*125px)的三次贝赛尔曲线 ctx.stroke(); // 添加径向渐变 var radgrad = ctx.createRadialGradient(827,73,10,827,73,60);//起始圆心坐标(827*73px)半径10px 结束圆心坐标(827*73px)半径60px 的径向渐变 radgrad.addColorStop(0, '#ff0000'); radgrad.addColorStop(.5, '#0000ff'); radgrad.addColorStop(1, '#00ff00'); ctx.fillStyle = radgrad; //导入SVG里path var path = new Path2D("M 760 75 A 60 60 0 1 1 821 136"); ctx.fill(path); //写入文字 ctx.fillStyle = "#ff5256"; //设置填充颜色 ctx.strokeStyle ="#ff5256"; //设置描边颜色 ctx.lineWidth = 2 //设置描边宽度 ctx.font = "48px -apple-system"; ctx.fillText("Jou", 925, 110);//实心文字 ctx.strokeText("bn", 1008, 110);//空心文字 var raf; var running = false; var ball = { rectx: 0, rectlength:100, x: 100, y: 300, vx: 12, vy: 12, radius: 5, color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); ctx.fillStyle = 'red' ctx.fillRect(this.rectx,canvas.height-4,this.rectlength,4); } }; function clear() { ctx.fillStyle = 'rgba(255,255,255,1)'; ctx.fillRect(0,130,canvas.width,canvas.height-130); } function drawball() { clear() ball.draw(); ball.x += ball.vx; ball.y += ball.vy; console.log(ball.x,ball.y,ball.rectx) if((ball.y) >= canvas.height){ console.log(ball.x,ball.y,ball.rectx) } if(((ball.x>=ball.rectx+ball.rectlength)||(ball.x<=ball.rectx)) &&((ball.y) >= canvas.height)){ alert('game over') } if (ball.y > canvas.height || ball.y < 150) { ball.vy = -ball.vy; } if (ball.x > canvas.width || ball.x < 0) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(drawball); } canvas.addEventListener('mousemove', function(e){ ball.rectx = e.clientX-canvas.offsetLeft-ball.rectlength/2; ball.rectx=ball.rectx/706*1200 }); canvas.addEventListener('mouseenter',function(e){ if (!running) { raf = window.requestAnimationFrame(drawball); running = true; } }); canvas.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(raf); running = false; }); ball.draw(); } }


image

【END】

本文链接:

版权声明:本博客所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 Joubn's blog

阅读 64 | 发布于 2020-05-26
暂无评论