canvas常用方法总结

最新推荐文章于 2020-11-10 15:00:03 发布

先知预判

最新推荐文章于 2020-11-10 15:00:03 发布

阅读量455

点赞数 1

分类专栏： canvas 文章标签： javascript vue.js css html5 css3

本文链接：https://blog.csdn.net/weixin_50539818/article/details/108947964

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas常用方法总结

	this.canvas         获取上下文canvas元素
    fillStyle()         颜色
    font=''             字体样式
    globalAlpha=''      透明度
    globalCompositeOperation=''混合模式
    lineCap=''          线条端点的样式
    lineDashOffset=''   虚线绘制的偏移距离
    lineJoin=''         线条转角的样式
    lineWidth=''        表示线宽
    miterLimit=''       限制平角和尖角
    shadowBlur=''       指定阴影的模糊程度
    shadowColor=''      指定阴影颜色
    shadowOffsetX=''    阴影的水平偏移大小
    shadowOffsetY=''    阴影的垂直偏移大小
    strokeStyle=''      设置描边的样式[color描边设置为颜色gradient描边设置为渐变pattern描边设置为图案]
    textAlign=''        指定文本的水平对齐方式
    textBaseline=''     文本垂直对齐方式


    arc()               绘制圆弧[圆弧对应横坐标，圆弧对应纵坐标，半径大小，开始角度，结束角度]
    ellipse()           绘制椭圆(150, 75, 80, 40, Math.PI / 4, 0, 2 * Math.PI)[圆心横坐标，圆心纵坐标，长轴半径大小，短轴半径大小，圆弧旋转度，圆弧开始角度，圆弧结束角度，true或false顺时针或逆时针]
    arcTo()             给路径添加圆弧[控制点的横坐标，控制点的纵坐标，控制点的横坐标，控制点的纵坐标，圆弧的半径大小]
    lineTo()            绘制直线以连接最后的子路径[直线落点横坐标,直线落点纵坐标]
    moveTo()            路径绘制的起始点[落点的横坐标,落点的纵坐标]
    quadraticCurveTo()  绘制二次贝赛尔曲线，要两个点[控制横坐标,控制纵坐标,结束横坐标,结束纵坐标]
    beginPath()         要开始一个新的路径了，和之前绘制的分开
    bezierCurveTo()     控制曲线[控制点的横坐标，控制点的纵坐标，控制点的横坐标，控制点的纵坐标，结束点的横坐标，结束点的纵坐标]
    clearRect()         不断清除画布内容再绘制，形成动画效果[横坐标，纵坐标，清除高，清除宽]
    createLinearGradient()渐变，是全局的，不是画布内的渐变[起始横坐标，起始纵坐标，结束横坐标，结束纵坐标]
    createRadialGradient()用来创建径向渐变[起始横坐标，起始纵坐标,起始园半径，结束横坐标，结束纵坐标,结束园半径]
    clip()              路径剪裁
    closePath()         吧最后点和开始点相连，形成闭合区域
    createImageData()   创建一个全新的imageData对象，里面所有像素都是透明黑
    createPattern()     创建一个平铺对象，可以指定平铺方式
    drawFocusIfNeeded() 可以让当前路径获取指定路径轮廓高亮
    drawImage()         图像处理[img,横坐标,纵坐标,宽度，高度，起始横坐标，起始纵坐标,宽度画多少,高度画多少]
    fill()              路径填充方法
    fillText()          文字输入[内容,横坐标，纵坐标]
    getImageData()      对图像进行处理[起始横坐标，起始纵坐标，宽度，高度]
    getLineDash()       获取当前虚线的样式
    isPointInPath()     检测某个点是否在当前路径中[检测点的横坐标,监测点的纵坐标]path指Path2D对象
    isPointInstroke()   检测某个点是否在描边路径中[检测点的横坐标,监测点的纵坐标]path指Path2D对象
    measureText()       可以测量文本的一些数据返回宽度等信息[被测量的文本]
    putImageData()      将imageData对象的数据绘制到位图上[img,替换横坐标,替换纵坐标,左上角横坐标,左上角纵坐标,宽度,高度]
    restore()           弹出存储的Canvas状态
    save()              保存当前Canvas画布状态并放在栈的最上面
    scale()             用来缩放坐标[x水平缩放比例,y垂直缩放比例]
    transform()         实现缩放，旋转，拉伸，位移 [a水平缩放,b水平斜切,c垂直斜切,垂直缩放，e水平位移，f垂直位移]
    translate()         实现整体位移[x水平位移的距离，y是垂直位移的距离]

描边

    stroke()            对路径进行描边
    strokeRect()        实现矩形描边效果[x横坐标,纵坐标,宽度,高度]
    strokeText()        文本描边[字体内容,横坐标,纵坐标]
    setLineDash()       设置虚线样式，用数组[5,10]

矩形

    fillRect()          矩形填充方法[横坐标，纵坐标，宽度，高度]
    rect()              绘制正方形或长方形[x横坐标,y纵坐标,宽度,高度]
    setTransform()      绘制一个矩形平行四边形[a水平缩放,b水平斜切,c垂直斜切,d垂直缩放,e水平位移,f垂直位移]
    rotate()            旋转矩阵[旋转45°，旋转弧度就是45 * Math.PI / 180]