canvas

作者: Gaochengxin | 来源:发表于2017-07-25 15:29 被阅读27次

    canvas 画布标签
    strokeRect() 绘制空心矩形
    fillRect() 绘制实心矩形
    clearRect() 清空绘制的矩形
    fillStyle 设置填充颜色
    strokeStyle() 设置边框颜色
    strokeWidth() 设置边框像素
    moveTo() 起点线
    lineTo() 结束点
    beginPath(): 开始一条路径

    closePath():创建从当前点到开始点的路径。
    arc() 用于创建有弧度的图形,如:圆,扇形。
    语法: 对象.arc(x,y,r,起始角,结束角,ture/false)

    canvas 插入图片
    语法 1:在画布上定位图像:context.drawImage(img,x,y);

    语法 2:在画布上定位图像,并规定图像的宽度和高度:
    context.drawImage(img,x,y,width,height);

    语法 3:剪切图像,并在画布上定位被剪切的部分:
    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

    设置背景

    createPattern(img,平铺方式)平铺图片

    canvas渐变

    线性渐变:
    createLinearGradient(x1,y1,x2,y2)
    放射性渐变:
    createRadialGradient(x1,y1,r1,x2,y2,r2)

    canvas 文本
    1.strokeText(文字,x,y)
    文字边框

    2.fillText(文字,x,y)
    文字填充

    3.font
    文字大小:'40px 宋体'

    4.textAlign (左右对齐方式)

    默认是start,跟left一样的效果 end right center

    5.textBaseLine (上下对齐方式)

     上top 中 middle 下 bottom
    

    阴影:
    shadowOffsetX、shadowOffsetY X轴偏移、Y轴偏移
    shadowBlur 高斯模糊值
    shadowColor
    阴影颜色

    相关文章

      网友评论

          本文标题:canvas

          本文链接:https://www.haomeiwen.com/subject/thnwkxtx.html