你的位置:首页 > ASP.net教程

[ASP.net教程]今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。


Canvas

  1. 标签<canvas></canvas>
  2. 默认宽300,高150,不用用Css设置宽高
  3. 获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象,利用该方法绘图
  4. 基本绘图命令
    • 设置开始绘图位置:ctx.moveTo(x,y);
    • 设置直线到的位置:ctx.lineTo(x,y);
    • 描边绘制:ctx.stroke();
    • 填充绘制:ctx.fill();
    • 自动闭合路径:ctx.closePath();
    • 开启新的绘制:ctx.beginPath();
    • 设置描边颜色:ctx.strokeStyle;
    • 设置填充颜色:ctx.fillStyle;
    • 保存开始设置:ctx.save();
    • 重置到保存样式:ctx.restore();
  5. 线型相关属性
    • 设置线宽:ctx.linewidth;(数字即可)
    • 设置线末端类型:ctx.lineCap;('butt' 表示两端使用方形结束,'round' 表示两端使用圆角结束,'square' 表示突出的圆角结束)
    • 设置相交线的拐点:ctx.lineJoin;('round' 使用圆角连接,'bevel' 使用平切连接,'miter' 使用直角转)
    • 获得线段样式数组:ctx.getLineDash();
    • 设置线段样式:ctx.setLineDash();(数组形式设置)
    • 绘制线段偏移量:ctx.lineDashOffset;
  6. 矩形绘图命令
    • 绘制矩形:ctx.rect;(因为还需要fill或者stroke才可以看见效果,所以直接使用下面两种)
    • 绘制边框矩形:ctx.strokeRect(x,y,width,height);
    • 绘制填充矩形:ctx.fillRect(x,y,width,height);
    • 清除矩形区域:ctx.clearRect(x,y,width,height);
  7. 圆弧绘制命令
    • 绘制圆弧:ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
    • 绘制相切弧:非重点
  8. 绘制文本命令
    • 绘制填充文字:ctx.fillText(text,x,y);
    • 绘制空心文字:ctx.strokeText(text,x,y);
    • 设置文本宽度:ctx.measureText();(非重点)
    • 设置字体样式:ctx.font;
    • 设置字体水平位置:ctx.textAlign;(start(默认), end, left, right, center)
    • 设置字体垂直位置:ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
  9. 绘制图片命令
    • 绘制图片(3参数):ctx.drawImage(img,x,y);
    • 绘制图片(5参数):ctx.drawImage(img,x,y,width,height);
    • 绘制图片(9参数):ctx.drawImage(img,casx,casy,caswidth,casheight,x,y,width,height);
  10. 变换命令
    • 平移变换:ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
    • 旋转变化:ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
    • 缩放变化:ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)