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.绘制非填充线段

 
 
  
 
 
 
 
 
 
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 
 
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 


 当前浏览器不支持，请更换浏览器

3.绘制填充图形

 
 
  
 
 
 
 
 
 
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 
 
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 


 当前浏览器不支持，请更换浏览器

4.绘制圆弧

 
 
  
 
 
 
 
 
 
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 


 当前浏览器不支持，请更换浏览器

5.绘制矩形

 
 
  
 
 
 
 
 
 
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 


 当前浏览器不支持，请更换浏览器

6.绘制文本

 
 
  
 
 
 
 
 
 
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 


 当前浏览器不支持，请更换浏览器

 
 
  
 
 
 
 
 
 
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 


 当前浏览器不支持，请更换浏览器

7.图片操作

 
 
  
 
 
 
 
 
 
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 
 


 当前浏览器不支持，请更换浏览器

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