码迷,mamicode.com
首页 > 其他好文 > 详细

canvas

时间:2019-05-22 09:51:22      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:旋转   false   操作   arc   close   sla   store   image   对象   

canvas(画布)主要是位图  svg(矢量图)

  canvas标签,必须要写的3个属性 id  width  height  

  为什么不再style中设置width和height呢?

    因为这设置width和height话会有位移差;

    位移差:在画布里面的元素有偏差;

  js中每次使用canvas,都要设置一个绘图环境,然后会得到一个对象,然后对其进行操作;

  var c=document.getElementById("") canvas标签的id值;

  var d=c.getContext("2d")  设置绘图属性;

  然后得到d这个对象,就可以对其进行操作元素里面的属性和方法;

  方法和属性(带()的是方法,不带的是属性):

    fillRect():绘制一个填充方块,默认颜色是黑色; 参数:x,y,w,h    (坐标和宽高)

    fillStyle:填充颜色  属性值:想要的颜色;

    strokeRect():绘制边框的方框; (如果绘制边框的话,会有2px的偏差,所以设置坐标的话需要在原有的基础上加上0.5),参数同fillRect()

    lineWidth:边框粗细;

    strokeStyle:线条颜色;

    lineJoin:边框圆角 属性值:round 圆,  

    lineCap:线条圆角;

    绘制线条

    moveTo():绘制线段的起点  参数  x,y   坐标位置;

    lineTo():绘制线段的领点  参数 x,y  坐标位置 ;  (最后一个lineTo就代表终点)

    线条只能有一个moveTo(),但却可以有很多lineTo()

    stroke()  绘制线段;

    beginPath  开始路径  必须要写对应的关闭路径  

    closePath  关闭路径

    两者同时出现,将绘制路径闭合,起始点和结尾点,首尾相连;

    rect()  绘制方块,及不带填充色和线框;

    fill()  填充颜色;

    clearRect(x,y,width,height)  清除矩形区域

    save()  restore()  这两个方法成对出现,中间的属性样式,之影响内部,不影响外部;

  画圆:

    arc():参数(x,y,半径,开始弧度,结束弧度,时针方向);

    x,y坐标  半径,圆的大小,  开始弧度,一般都是0,结束弧度,一般都是 (0-360)*Math.PI/180,  时针方向,true 逆时针,false 顺时针;    

      translate()  平移,画布大小位置不变,起始坐标变了   参数 x,y 

    旋转:rotate()  同translate原理;

    需注意一点,需要先通过  translate()  确定起始坐标点,在来操作rotate会比较好

    缩放:scale(0.5,0.5)  画布缩放,就是将画布向后移动,跟人的视距就远了,近大远小;

    画布中插入图片;drawImage()

    var img=new Image()  

    img.src="图片路径"  

    img.onload=function(){

      d.drawImage(img,x,y,w,h)    d就是画布对象,img图片对象,坐标宽高,drawImage()在画布中插入图片

    }    

  插入文字:

    strokeText()  插入的文字带边框  参数:   "输入的内容" , x , y  (坐标)

    fillText()    不带边框    参数同strokeText()

     textAlign:相对字体的起始点,水平居中

    textBaseline:移到字体的起始点,垂直居中

    font:字体大小和字形

canvas

标签:旋转   false   操作   arc   close   sla   store   image   对象   

原文地址:https://www.cnblogs.com/bokeyanghao/p/10903742.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!