canvas知识总结

时间：2021-05-28

1.基础知识

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充 context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式 context.strokeStyle//边框样式 context.lineWidth//图形边框宽度

context.arc(centerx圆心横左边,centery圆心纵坐标,radius半径,startingAngle起始弧度值,endingAngle结束弧度值,anticlockwise='false'顺时针默认false)

2.绘制非填充线段

3.绘制填充图形

4.绘制圆弧

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script>   <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=800; canvas.height=800; ctx.beginPath(); //开始一个新的绘画 ctx.lineWidth=5;//边框宽度 ctx.strokeStyle="red"; //边框样式 ctx.arc(100, 100, 30, 0, 1.5*Math.PI); ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来 ctx.stroke();//绘制线段 ctx.beginPath(); //开始一个新的绘画 ctx.lineWidth=5;//边框宽度 ctx.strokeStyle="red"; //边框样式 ctx.arc(200, 100, 30, 0, 2*Math.PI); ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来 ctx.stroke();//绘制线段 ctx.beginPath(); //开始一个新的绘画 ctx.lineWidth=5;//边框宽度 ctx.strokeStyle="red"; //边框样式 ctx.arc(300, 100, 30, 0, 0.5*Math.PI); ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来 ctx.stroke();//绘制线段 ctx.beginPath(); //开始一个新的绘画 ctx.lineWidth=5;//边框宽度 ctx.strokeStyle="red"; //一个绘画结束，如果绘画不是封闭的，就封闭起来 ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意：0*PI，0.5*PI，1*PI，1。5*PI，2*PI所占据的位置是固定的 ctx.closePath(); //一个绘画结束 ctx.stroke();//绘制线段 ctx.beginPath(); //开始一个新的绘画 ctx.fillStyle="red"; //边框样式 ctx.arc(500, 100, 30, 0, 1.5*Math.PI); ctx.closePath(); //一个绘画结束，如果绘画不是封闭的，就封闭起来 ctx.fill();//绘制填充 ctx.beginPath(); //开始一个新的绘画 ctx.lineWidth=5;//边框宽度 ctx.strokeStyle="red"; //边框样式 ctx.arc(600, 100, 30, 0, 1.5*Math.PI); ctx.stroke();//绘制线段 }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

5.绘制矩形

6.绘制文本

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script>   <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script>   <style type="text/css"> canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;} </style> <script> window.onload=function(){ function draw(){ var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); canvas.width=500; canvas.height=500; ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }else{ alert('当前浏览器不支持，请更换浏览器'); } } draw(); } </script></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

7.图片操作

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

canvas知识总结

相关文章

24个canvas基础知识小结

HTML5之SVG 2D入门4—笔画与填充

js实现canvas图片与img图片的相互转换的示例

Canvas多边形绘制的实现方法

html5清空画布方法（三种）