美文网首页
Canvas绘制矩形&圆形&图片

Canvas绘制矩形&圆形&图片

作者: 佩佩216 | 来源:发表于2018-07-16 10:17 被阅读0次

    1.方式一:先设置 rect, 再设置样式
    2.方式二:先设置样式, 再设置strokeRect,fillRect

    1. 快速创建矩形rect()方法

    • 语法:ctx.rect(x, y, width, height);
    • 解释:x, y是矩形左上角坐标, width和height都是以像素计
    • rect方法只是规划了矩形的路径,并没有填充和描边。
    • 改造案例:04填充矩形.html
    • rect: abbr. 矩形(rectangular);收据(receipt)

    2. 快速创建描边矩形和填充矩形

    • 语法: ctx.strokeRect(x, y, width, height);
    • 参数跟ctx.rect相同,注意此方法绘制完路径后立即进行stroke绘制
    • 语法:ctx.fillRect(x, y, width, height);
    • 参数跟ctx.rect相同, 此方法执行完成后。立即对当前矩形进行fill填充。

    3. 清除矩形(clearRect)

    • 语法:ctx.clearRect(x, y, width, hegiht);
    • 解释:清除某个矩形内的绘制的内容,相当于橡皮擦。

    绘制圆形(arc)

    • 概述:arc() 方法创建弧/曲线(用于创建圆或部分圆)。
    • 语法:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
    • arc: 弧(度)弧形物;天穹 英 [ɑːk] 美 [ɑrk]
    • counter 反击,还击;反向移动,对着干;反驳,回答 ['kaʊntə] 美 ['kaʊntɚ]
    • 解释:
    • x,y:圆心坐标。
    • r:半径大小。
    • sAngle:绘制开始的角度。 圆心到最右边点是0度,顺时针方向弧度增大。
    • eAngel:结束的角度,注意是弧度。π
    • counterclockwise:是否是逆时针。true是逆时针,false:顺时针(默认)
    • 弧度和角度的转换公式: rad = deg*Math.PI/180;
    • 在Math提供的方法中sin、cos等都使用的弧度
    image.png
    • 三角函数的补充

    • Math.sin(弧度); //夹角对面的边 和 斜边的比值

    • Math.cos(弧度); //夹角侧边 与斜边的比值

    • 圆形上面的点的坐标的计算公式

    • x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标

    • y =y0 + Math.sin(rad) * R;//注意都是弧度


      image.png

    绘制图片(drawImage) (重点)

    1 基本绘制图片的方式

    • context.drawImage(img,x,y);
    • 参数说明: x,y 绘制图片左上角的坐标,在画布上绘制的坐标点 img是绘制图片的dom对象。

    2 在画布上绘制图像,并规定图像的宽度和高度

    • context.drawImage(img,x,y,width,height);
    • 参数说明:width 绘制图片的宽度, height:绘制图片的高度
    • 如果指定宽高,最好成比例,不然图片会被拉伸
    • 等比公式: toH = Height * toW / Width;
    • 设置的高度 = 原高度 * 设置的宽度 / 原宽度;

    3 图片裁剪,并在画布上定位被剪切的部分

    • context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    • 参数说明:
      • sx,sy 裁剪的左上角坐标,
      • swidth:裁剪图片的高度。
      • sheight:裁剪的高度
      • 其他同上

    4 用JavaScript创建img对象

    • 第一种方式:
    var img = document.getElementById("imgId");
    
    
    • 第二种方式:
    var img = new Image();//这个就是 img标签的dom对象
    img.src = "imgs/arc.gif";
    img.alt = "文本信息";
    img.onload = function() {
    //图片加载完成后,执行此方法
    
    

    示意图:

    • 原图片:
    ctx.drawImage(img, 100, 100, 300, 216);
    
    
    • 截取图片:
    裁剪的位置: sx,sy,swidth,sheight : 50 50 120 120
    sx,sy,swidth,sheight 相对于原图片的裁剪区域
    
    放置位置:x,y,width,height : 350, 100, 120, 120
    x, y ,width, height 相对于画布的显示区域
    ctx.drawImage(img, 50, 50, 120, 120, 450, 100, 120, 120);
    
    
    image.png

    相关文章

      网友评论

          本文标题:Canvas绘制矩形&圆形&图片

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