canvas绘图（一）

canvas绘制矩形1：

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); //开始路径 ctx.beginPath(); //路径 ctx.moveTo(100,100); ctx.lineTo(250,100);//画路径 ctx.lineTo(250,200); ctx.lineTo(100,200); //结束路径 ctx.closePath(); //填充 ctx.fillStyle='#ff0'; ctx.fill(); </script>

lineTo(x,y)参数：

x 绘制位置xy 绘制位置y

canvas绘制矩形2：

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); ctx.fillStyle='#ff0'; ctx.fillRect(100,100,100,100); </script>

fillRect(a,b,c,d)参数： * a 绘制位置x * b 绘制位置y * c 绘制宽 * d绘制高

效果：

canvas绘制圆形：

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); //开始路径 ctx.beginPath(); //路径 ctx.arc(250,150,100,0,360); //结束路径 ctx.closePath(); //填充 ctx.fillStyle='#ff0'; ctx.fill(); </script>

效果图：

canvas绘制多角度图形

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); //开始路径 ctx.beginPath(); //路径 ctx.moveTo(250,150); ctx.arc(250,150,100,toDeg(0),toDeg(270)); //结束路径 ctx.closePath(); //填充 ctx.fillStyle='red'; ctx.fill(); /*角度转弧度*/ function toDeg(r){ return r*Math.PI/180; }

arc（a,b,c,d,e）参数： * a 绘制x * b 绘制y * c 圆半径 * d 圆开始角度 * e 圆结束角度

效果图：

canvas绘制文字

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); ctx.font = '20px pinghei'; ctx.textAlign = 'center'; ctx.fillText('zww',250,150); </script>

fillText(a,b,c)参数：

a 绘制内容b 绘制xc 绘制y

效果：

canvas绘制图片

<canvas width="500" height="300">您的浏览器不支持canvas</canvas> <script> //获取标签 var cas = document.querySelector('canvas'); //获取绘制环境 var ctx = cas.getContext('2d'); //导入图片路径 var img = new Image(); img.src = './qq1.png'; img.onload = function(){ /*绘制图片*/ ctx.drawImage(img,0,0,200,100); } </script>

drawImage（a,b,c,d,e）参数：

a img对象b 绘制坐标x c 绘制坐标yd 绘制宽e绘制高

效果图：