canvas知识总结

2019-11-19 17:47:00

字体：大中小

来源：转载

供稿：网友

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);//终点1    ctx.lineTo(50,100);//终点2        ctx.lineTo(50,50);//终点3        ctx.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);//终点1    ctx.lineTo(50,100);//终点2    ctx.lineTo(50,50);//终点3        ctx.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>

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

上一篇：assert()函数用法总结(推荐)

下一篇：基于JavaScript实现自定义滚动条