你的位置:首页 > 软件开发 > Java > canvas图形绘制

canvas图形绘制

发布时间:2017-08-29 01:00:07
前面的话  前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制 绘制线条【绘制线条】  下面来尝试绘制一段线条<canvas id="drawing" style="border:1px solid ...

canvas图形绘制

前面的话

  前面分别介绍了canvas的基础用法和进阶用法,本文将使用canvas的各种语法进行图形绘制

 

绘制线条

【绘制线条】

  下面来尝试绘制一段线条

<canvas id="drawing" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); //开始绘制 context.beginPath(); //将光标移动到(10,10)位置 context.moveTo(10,10); //从(10,10)点开始绘制一条直线,到(100,100)为止 context.lineTo(100,100); //线条宽度为5 context.lineWidth = 5; //线条颜色为浅绿 context.strokeStyle = "lightgreen"; //绘制线条 context.stroke(); } </script>
canvas图形绘制

【绘制折线】

  下面,更进一步,绘制多条折线

<canvas id="drawing" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); context.beginPath(); context.moveTo(10,10); context.lineTo(50,50); context.lineTo(10,100); context.lineWidth = 5; context.strokeStyle = "lightgreen"; context.stroke(); context.beginPath(); context.moveTo(60,10); context.lineTo(100,50); context.lineTo(60,100); context.lineWidth = 5; context.strokeStyle = "lightblue"; context.stroke(); context.beginPath(); context.moveTo(110,10); context.lineTo(150,50); context.lineTo(110,100); context.lineWidth = 5; context.strokeStyle = "pink"; context.stroke();} </script>

【绘制闭合图形】

   下面绘制四条线条,组合成一个闭合图形

<canvas id="drawing" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); context.beginPath(); context.moveTo(10,10); context.lineTo(110,10); context.lineTo(110,110); context.lineTo(10,110); context.lineTo(10,10); context.lineWidth = 10; context.strokeStyle = "lightgreen"; context.stroke(); } </script>

  结果如下所示,最后一笔闭合的时候有问题,导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话,是没有问题的。但是笔触越大,线条越宽

   这时,需要使用clothPath()来闭合图形,而最后一笔可以不画出来

<script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); context.beginPath(); context.moveTo(10,10); context.lineTo(110,10); context.lineTo(110,110); context.lineTo(10,110); context.closePath(); context.lineWidth = 10; context.strokeStyle = "lightgreen"; context.stroke(); } </script>

  当然,如果只是画矩形,使用rect()或fillRect()方法更简单 

 

绘制矩形

  下面来绘制一个背景颜色为红色,尺寸为100*100,位置为(0,0)点的矩形

<canvas id="drawing" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d');   context.fillStyle = 'red';   context.fillRect(0,0,100,100);}</script>
canvas图形绘制

  下面来绘制一个半透明的蓝色描边矩形,尺寸为100*100,位置在(0,0)点

<script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d');   context.strokeStyle = 'rgba(0,0,255,0.5)';   context.strokeRect(0,0,100,100);
}</script>
canvas图形绘制

   接下来,在(0,0)点绘制尺寸为100*100背景为半透明红色的矩形, 1s后在(50,50)点绘制尺寸为100*100,描边为半透明蓝色的矩形,1s后使用clearRect()清除矩形

<canvas id="drawing" > <p>The canvas element is not supported!</p></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); context.fillStyle = 'rgba(255,0,0,0.5)'; context.fillRect(0,0,100,100); setTimeout(function(){  context.strokeStyle = 'rgba(0,0,255,0.5)';  context.strokeRect(50,50,100,100);  },1000); setTimeout(function(){  context.clearRect(0,0,300,150); },2000); } </script>
canvas图形绘制

 

绘制弧形

【绘制圆】

<canvas id="canvas"> <p>The canvas element is not supported!</p></canvas><script>var canvas = document.getElementById('canvas');if(canvas.getContext){ canvas.width = 1000; canvas.height = 200; canvas.style.width = '400px';  var context = canvas.getContext('2d'); context.lineWidth = 5; context.strokeStyle = '#058'; for(var i = 0; i < 10; i++){  context.beginPath();  context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);  context.closePath();  context.stroke(); } }</script> 

【绘制圆角矩形】

  圆角矩形的示意图如下所示

canvas图形绘制
<canvas id="canvas" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>var canvas = document.getElementById('canvas');if(canvas.getContext){ var cxt = canvas.getContext('2d'); var W = 300,H = 150; drawRoundRect(cxt,0,0,W,H,50);  cxt.lineWidth = 10; cxt.stroke();   function drawRoundRect(cxt, x, y, w, h, r){   cxt.beginPath();  //左上角  cxt.arc(x+r,y+r,r,Math.PI,Math.PI*3/2);  //上侧  cxt.lineTo(x+w-r,y);  //右上角  cxt.arc(x+w-r,y+r,r,Math.PI*3/2,Math.PI*2);  //右侧  cxt.lineTo(x+w,y+h-r);  //右下角  cxt.arc(x+w-r,y+h-r,r,0,Math.PI/2);  //下侧  cxt.lineTo(x+r,y+h);  //左下角  cxt.arc(x+r,y+h-r,r,Math.PI/2,Math.PI);  cxt.closePath(); }}</script> 

【绘制弯月】

  下面是一轮弯月的计算示意图

canvas图形绘制

  下面将上面的视图变成更通用的函数封装,代码如下

<canvas id="drawing" style="border:1px solid black"> <p>The canvas element is not supported!</p></canvas><script>if(drawing.getContext){ var W = drawing.width = 200; var H = drawing.height = 200; var cxt = drawing.getContext('2d'); function dis(x1,y1,x2,y2){ return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)); } function fillMoon(cxt,d,x,y,r,rot){ cxt.save(); cxt.translate(x,y); cxt.rotate(rot*Math.PI/180); cxt.scale(r,r); cxt.beginPath(); cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true); cxt.moveTo(0,-1); cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d); cxt.closePath(); cxt.restore(); } fillMoon(cxt,2,100,100,100,0) cxt.fillStyle = '#fb5'; cxt.fill();}</script>

 

复杂图形

  下面基于线条、矩形和弧形,来绘制复杂图形

【绘制魔性图案】

  设置为正方形的魔性图案,当坐标位置x或y变化1px时,宽度或高度需要变化2px

  于是,得到下面代码

<canvas id="canvas" width=300 height=300 style="border: 1px solid #aaaaaa;"> <p>The canvas element is not supported!</p></canvas><script>var canvas = document.getElementById("canvas");if(canvas.getContext){ var context = canvas.getContext("2d"); for(var i=0; i<=20; i++){ drawRect(context, 0 + 15 * i, 0 + 15 * i, 300 - 30 * i, 300 - 30 * i); } function drawRect(cxt,x,y,width,height){ cxt.beginPath(); cxt.rect(x, y, width, height); cxt.lineWidth = 5; cxt.strokeStyle = "blue"; cxt.stroke();  }}</script>

【绘制五角星】

  五角星可分为大圆和小圆两部分。大圆控制外侧5个点的坐标位置,小圆控制内侧5个点的坐标位置。下面是详细的角度分析

 

canvas图形绘制
<canvas id="canvas"> <p>The canvas element is not supported!</p></canvas><script>var canvas = document.getElementById('canvas');if(canvas.getContext){ var cxt = canvas.getContext('2d'); var H = 100,W = 200; canvas.height = H; canvas.width = W;  function drawStar(cxt,r,R,x,y,rotate){  if(rotate == undefined){   rotate = 0;  }  cxt.beginPath();  for(var i = 0; i < 5; i++){   cxt.lineTo(Math.cos((18 + i*72 - rotate)/180*Math.PI)*R + x,-Math.sin((18+i*72 - rotate)/180 * Math.PI) * R + y);   cxt.lineTo(Math.cos((54 + i*72 - rotate)/180*Math.PI)*r + x,-Math.sin((54+i*72 - rotate)/180 * Math.PI) * r + y);  }  cxt.closePath();  cxt.stroke(); }  drawStar(cxt,30,50,50,50); }</script> 

【绘制螺旋线】

  下面是制作螺旋线的示意图

canvas图形绘制

  从圆心点开始,按照圆的公式向外移动,每次移动时,圆心角逐渐增大,半径逐渐增大

<canvas id="drawing" width="100" height="100"></canvas><script>var drawing = document.getElementById('drawing');if(drawing.getContext){ var context = drawing.getContext('2d'); var x = drawing.width/2; var y = drawing.height/2; var deg = 0; var r = 1; context.strokeStyle = 'red'; context.lineWidth = 2; context.moveTo(x,y); for(var i = 0; i < 4800; i++){  deg++;  r+=0.01;  context.lineTo(x+Math.cos(deg * Math.PI/180)*r,y+Math.sin(deg * Math.PI/180)*r); } context.stroke();}</script>

 

原标题:canvas图形绘制

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录