canvas知识总结

1.基础知识
canvas元素绘制图像的时候有两种方法，分别是

context.fill（）//填充context.stroke（）//绘制边框

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

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

context.arc（centerx圆心横左边,centery圆心纵坐标,radius半径,startingAngle起始弧度值,endingAngle结束弧度值,anticlockwise="false"顺时针默认false）
2.绘制非填充线段

<！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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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=300;canvas.height=300;ctx.beginPath（）; //一个绘画开始ctx.moveTo（50,50）;//线段起点ctx.lineTo（100,100）;//终点1ctx.lineTo（50,100）;//终点2ctx.lineTo（50,50）;//终点3ctx.lineWidth=5;//边框宽度ctx.strokeStyle="red"; //边框样式ctx.closePath（）; //一个绘画结束 ctx.stroke（）;//绘制线段}else{ alert（"当前浏览器不支持，请更换浏览器"）;} } draw（）; }</script> <style tyrp="text/css">canvas{ border: 1px solid black;margin: 0 auto;display: block;} </style></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

3.绘制填充图形

<！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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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=300;canvas.height=300;ctx.beginPath（）; //一个绘画开始ctx.moveTo（50,50）;//线段起点ctx.lineTo（100,100）;//终点1ctx.lineTo（50,100）;//终点2ctx.lineTo（50,50）;//终点3ctx.fillStyle="red";ctx.fill（）;//边框添加ctx.lineWidth=5;//边框宽度ctx.strokeStyle="blue"; //边框样式ctx.closePath（）; //一个绘画结束ctx.stroke（）;//绘制线段}else{ alert（"当前浏览器不支持，请更换浏览器"）;} } draw（）; }</script> <style tyrp="text/css">canvas{ border: 1px solid black;margin: 0 auto;display: block;} </style></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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.绘制矩形

<！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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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.fillRect（25,25,100,100）;//绘制一个填充的矩形ctx.clearRect（45,45,60,60）;//清除指定矩形区域，让清除部分完全透明ctx.strokeRect（50,50,50,50）; //绘制一个矩形的边框}else{ alert（"当前浏览器不支持，请更换浏览器"）;} } draw（）; }</script></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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.图片操作

<！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> <！--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><！[endif]--> <！--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix（".png"）;</script><！[endif]--> <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; var img=new Image（）;img.src="http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg" img.onload=function（）{ctx.drawImage（img,0,0）;ctx.beginPath（）; ctx.moveTo（30,96）; ctx.lineTo（70,66）; ctx.lineTo（103,76）; ctx.lineTo（170,15）; ctx.stroke（）; }}else{ alert（"当前浏览器不支持，请更换浏览器"）;} } draw（）; }</script></head><body> <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas></body></html>

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