canvas 常用的直线、矩形、圆形使用
1、新建一个html文件,写入一个canvas 标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #myCanvas { border: 1px solid #000000; } </style> <body> <canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas> </body> </html>
2、封装一个直线的调用的方法,方法里面都有对应的注释和效果图。
var car = document.getElementById("myCanvas"); //直线调用 --得到的效果图如下 straightLine(0, 0, 5, 250, 250, "yellow"); //常用的直线写法 function straightLine(startX, startY, lineW, endX, endY, color) { // 必须判断是否存在该方法,即判断浏览器是否支持canvas if (car.getContext) { var ctx = car.getContext("2d"); //开始 ctx.beginPath(); //设置线的宽度 ctx.lineWidth = lineW; // 起始点 x,y ctx.moveTo(startX, startY); //终点 x,y ctx.lineTo(endX, endY); //自定义颜色 ctx.strokeStyle = color; //没写默认颜色为黑色 ctx.stroke(); //结束(不关闭的话会和开始的地方直接相接) ctx.closePath(); } }
3、封装一个矩形的调用方法,方法里面都有对应的注释和效果图。
var car = document.getElementById("myCanvas"); //矩形调用 rectangle(200, 200, 100, 100, 0, "yellow", 5); //常用矩形的写法 function rectangle(startX, startY, Width, Height, reatState, color, lineW) { var ctx = car.getContext("2d"); //开始 ctx.beginPath(); //自定义颜色 ctx.strokeStyle = color; //设置线的宽度 ctx.lineWidth = lineW; //根据状态值判断是否需要填充矩形(0:不需要,1:需要) if (reatState == 0) { //参数作用:x的起始坐标,y的起始坐标,x的宽度值,y的高度值 // ctx.rect(startX,startY,Width,Height); //参数作用:x的起始坐标,y的起始坐标,x的宽度值,y的高度值 ctx.strokeRect(startX, startY, Width, Height); } else if (reatState == 1) { //设置填充的颜色 (注意:填充的颜色必须在fillReact方法之前,不然不生效) ctx.fillStyle = "green"; //被填充的矩形,参数作用:x的起始坐标,y的起始坐标,x的宽度值,y的高度值 ctx.fillRect(startX, startY, Width, Height); //在某些情况下可能需要把填充的一部分内容清除掉,这个时候可以用clearRect() //对应的参数作用依然相同:x的起始坐标,y的起始坐标,要清除的宽度值,要清除的高度值 ctx.clearRect(220, 220, 50, 50); } ctx.stroke(); //结束 ctx.closePath(); }
4、封装一个圆形的调用方法,方法里面都有对应的注释和效果图。
var car = document.getElementById("myCanvas"); //圆形调用 circular(250,250,50,0,2,false); //常用圆形的写法 function circular(x,y,r,startRote,endRote,state){ var ctx = car.getContext("2d"); ctx.beginPath(); //一个圆的实现 //参数:圆的中心点X坐标,圆的中心点Y坐标,圆的半径,圆的起始角,圆的结束角,方向(false顺时针,true逆时针) ctx.arc(x,y,r,startRote,Math.PI*endRote,state); //有时候我们不需要一个完整的圆,需要半圆或者四分之一的圆,而且还是可以指定位置的时候 //得到一个从0度到180度的半圆 // ctx.arc(250, 250, 50,0, Math.PI * 1, false); //得到一个从0度到90度的四分之一圆 // ctx.arc(250, 250, 100, 0, 0.5 * Math.PI, false); //没写默认颜色为黑色 ctx.stroke(); ctx.closePath(); }