canvas属性方法整理

Posted 2023-03-09

参考技术A 整理了一些有关canvas的属性（ ’ - ’ * )

canvas画布

用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript

canvas的默认宽高为300*150，不能通过css或行内样式修改它的宽高，它有自己的宽高属性

canvas是一个html元素，通过js来执行绘制

getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持

它可以做什么？

  html5小游戏

  绘制图片，图标，图表，曲线图等等，例如地图上的热力图等等

  以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<http://www.hewebgl.com/>)

画布栅格

  

  通常画布的一个格子就代表canvas中元素的一像素，栅格的左上角为起点，坐标0, 0，所有位置都相对于原点定位，

使用：

  var canvas = document.gteElementById('canvas');

  var context = canvas.getContext('2d'); // 环境准备好，调用context的方法属性绘制即可

属性及方法

  beginPath()

    新开始一条路径，绘制方法被指向新路径

  closePath()

    闭合当前路径，让绘制命令重新指向上下文

  stroke()

    通过线条来绘制图像轮廓

  fill()

    通过填充路径的内容区域生成实心图形

  moveTo(x, y)

    描述起点坐标

  lineTo(x, y)

    描述终点坐标

  rect(x, y, width, height)

    绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px

    需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形

  strokeRect(x, y. width, height)

    参数同上，绘制边框矩形

  fillRect(x,y,width,height)

    参数同上，绘制填充矩形

  clearRect(x,y,width,height)

    清除指定区域矩形,会留下一块白色矩形区域

  arc(x,y,r,sangle,eangle,counterclockwise)

    圆弧

    x,y为绘制圆的圆心坐标

    r为圆的半径

    sangle,eangle为圆的起始角度和结束角度

    counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针

  strokeStyle

    描边的颜色

  fillStyle

    填充的颜色

  shadowColor

    阴影颜色

  shadowBlur

    阴影模糊级别

  shadowOffsetX

    阴影水平偏移量

  shadowOffsetY

    阴影垂直偏移量

  lineCap

    设置线条两端结束位置的形状

    butt默认

    round圆形帽

    square正方形

  lineJoin

    设置线条与线条接合处的样式

    miter (默认)， 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

    round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

    bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

  lineWidth

    线条宽度，以像素计算，没有px

  rotate(angle)

    旋转

角度转弧度公式

  deg乘以Math.PI/180

    deg为要绘制的角度

    Math.PI为圆周率，也就是180度，但是它为一个浮点数，即使除以180也不能忽略它的小数

  translate(x, y)

    移动原点

    将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置

  scale(x, y)

    缩放x轴和y轴分别设置缩放

  rotate(x, y)

    旋转

    凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算

  arcTo(x1,y1,x2,y2,r)

    画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径

setLineDash/lineDashOffset/getLineDash

    绘制虚线

    setLineDash([实线长度, 间隙长度])方法接受一个数组，来指定线段与间隙的交替

  lineDashOffset设置起始偏移量

    getLineDash()返回当前虚线的样式，为一个数组

  fillText(text, x, y [, maxWidth])

    绘制填充文本

    text文本

  x,y指定的坐标

    maxWidth最大宽度，可选

strokeText(text, x, y [, maxWidth])

    绘制文本边框

    text文本

    x,y指定坐标

  maxWidth最大宽度，可选

  font

    文本样式

    和css设置字体相似，复合设置

    例如：context.font='100px sans-serif';

  textAlign/textBaseline/direction

    textAlign(文本对齐选项): start|end|left|right|center

    textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom

    direction(文本方向)：ltr|rtl|inherit

  绘制图片

    drawImage(imgElement,x,y,width,height)

    x,y绘制图片的起始坐标

    imgElement 要绘制的图片元素,或者为一个canvas的引用

    width,height,设置图片的宽高

  裁剪图片

    drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)

    imgElement 要绘制的图片元素,或者为一个canvas的引用

    sx, sy (可选)要裁剪的起始位置

    swidth, sheight (可选)要裁剪区域的宽高

    x,y放置原始图片的位置

    width,height (可选)原始图片的宽高

    为了不失真，一般尝试让swidth, sheight和width、height相等，x,y原点，去改变sx,sy(裁剪的起始位置)即可，实际根据需求来定

  save()/restore()

    save() 保存状态，保存在栈中，类似于数组的push

    restore() 恢复状态，类似于数组的pop

  clip()

    裁剪路径

    把一个路径之外的内容进行裁剪，只保留路径本身内部的内容

  用于控制动画的常用方法

    setInterval()

    setTimeout()

    requestAnimationFrame()

      只执行一次，一般通过递归调用来完成动画制作

      接受一个回调函数，专门提供给动画的api，默认刷新帧率为一秒60次，优于以上两个方法，比如页面未激活状态下回自动暂停，节省cpu的开销

      cancelAnimationFrame() 用来停止此方法的执行

    可能有不足的地方 欢迎大家补充(•̀⌄•́)