网站地图    收藏   

主页 > canvas引擎 > canvas基础 >

HTML5画布(Canvas)元素速查表

来源:未知    时间:2023-02-13 17:13 作者:小飞侠 阅读:

[导读] HTML5 画布(Canvas)元素 HTML5画布( Canvas )元素 canvasid=myCanvaswidth=500height=300 浏览器不支持画布(canvas)时的备案 canvasid=myCanvaswidth=500height=300yourbrowserdoesntsupportcanvas!/canvas 2d context varcontext=canvas...

    HTML5画布(Canvas)元素

    >HTML5画布(Canvas)元素

    <canvas id="myCanvas" width="500" height="300">

    浏览器不支持画布(canvas)时的备案

    <canvas id="myCanvas" width="500" height="300">
      your browser doesn't support canvas!
    </canvas>

    2d context

    var context = canvas.getContext('2d');

    Webgl context (3d)

    var context = canvas.getContext('webgl');

    图形

    绘制方形


    CanvasRenderingContext2D.rect() 是 Canvas 2D API 创建矩形路径的方法,矩形的起点位置是 (x, y),尺寸为 width 和 height。矩形的 4 个点通过直线连接,子路径做为闭合的标记,所以你可以填充或者描边矩形。

    原文地址:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/rect

    context.rect(x, y, width, height);
    context.fill();
    context.stroke();

    填充区域

    CanvasRenderingContext2D.fillRect() 是 Canvas 2D API 绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形对的填充样式。

    这个方法是直接在画布上绘制填充,并不修改当前路径,所以在这个方法后面调用 fill() 或者stroke()方法并不会对这个方法有什么影响。

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillRect

    context.fillRect(x, y, width, height);

    绘制方形的边框

    CanvasRenderingContext2D.strokeRect() 是 Canvas 2D API 在 canvas 中,使用当前的绘画样式,描绘一个起点在 (x, y)、宽度为 w、高度为 h 的矩形的方法。

    此方法直接绘制到画布而不修改当前路径,因此任何后续fill() 或stroke()调用对它没有影响。

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/strokeRect

    context.strokeRect(x, y, width, height);

    绘制圆形

    CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。圆弧路径的圆心在 (x, y) 位置,半径为 r,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/arc

    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();

    风格

    填充

    context.fillStyle = 'red';
    context.fill();

    勾勒

    context.strokeStyle = 'red';
    context.stroke();

    线性渐变

    var grd = context.createLinearGradient(x1, y1, x2, y2);
    grd.addColorStop(0, 'red');   
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    径向渐变

    var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    图案

    var imageObj = new Image();
    imageObj.onload = function() {
      var pattern = context.createPattern(imageObj, 'repeat');
      context.fillStyle = pattern;
      context.fill();
    };
    imageObj.src = 'path/to/my/image.jpg';

    交点

    context.lineJoin = 'miter|round|bevel';

    线头

    context.lineCap = 'butt|round|square';

    阴影

    context.shadowColor = 'black';
    context.shadowBlur = 20;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;

    Alpha (透明)

    context.globalAlpha = 0.5; // between 0 and 1

    颜色格式

    字符串

    context.fillStyle = 'red';

    16进制

    context.fillStyle = '#ff0000';

    16进制简写

    context.fillStyle = '#f00';

    RGB

    context.fillStyle = 'rgb(255,0,0)';

    RGBA

    context.fillStyle = 'rgba(255,0,0,1)';

    路径

    开始路径

    context.beginPath();

    画线

    context.lineTo(x, y);

    弧形

    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

    二次曲线

    context.quadraticCurveTo(cx, cy, x, y);

    二次曲线

    context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

    关闭路径

    context.closePath();

    移动位置

    context.moveTo(x, y);
  • CanvasRenderingContext2D.moveTo() 是 Canvas 2D API 将一个新的子路径的起始点移动到 (x,y) 坐标的方法。

  • 图片

    画图

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, x, y);
    };
    imageObj.src = 'path/to/my/image.jpg';

    指定尺寸画图

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'path/to/my/image.jpg';

    裁剪图片

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
    };
    imageObj.src = 'path/to/my/image.jpg';

    文本

    写文字

    context.font = '40px Arial';
    context.fillStyle = 'red';
    context.fillText('Hello World!', x, y);

    写镂空文字

    context.font = '40pt Arial';
    context.strokeStyle = 'red';
    context.strokeText('Hello World!', x, y);

    粗体

    context.font = 'bold 40px Arial';

    斜体

    context.font = 'italic 40px Arial';

    对齐方式

    context.textAlign = 'start|end|left|center|right';

    文字基线

    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
    |bottom';

    获取文本宽度

    var width = context.measureText('Hello world').width;

    动画

    移动

    context.translate(x, y);

    扩大缩小

    context.scale(x, y);

    旋转

    context.rotate(radians);

    水平翻转

    context.scale(-1, 1);

    上下翻转

    context.scale(1, -1);

    自定义变换

    context.transform(a, b, c, d ,e, f);

    设置变换

    context.setTransform(a, b, c, d ,e, f);

    切割

    context.transform(1, sy, sx, 1, 0, 0);

    重置

    context.setTransform(1, 0, 0, 1, 0, 0);

    状态存储

    存储

    context.save();

    恢复

    context.restore();

    裁剪

    裁剪

    // draw path here
    context.clip();

    图像数据

    获取图像数据

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;

    遍历像素点

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var len = data.length;
    var i, red, green, blue, alpha;
    
    for(i = 0; i < len; i += 4) {
      red = data[i];
      green = data[i + 1];
      blue = data[i + 2];
      alpha = data[i + 3];
    }

    沿坐标遍历像素点

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var x, y, red, green, blue, alpha;
    
    for(y = 0; y < imageHeight; y++) {
      for(x = 0; x < imageWidth; x++) {
        red = data[((imageWidth * y) + x) * 4];
        green = data[((imageWidth * y) + x) * 4 + 1];
        blue = data[((imageWidth * y) + x) * 4 + 2];
        alpha = data[((imageWidth * y) + x) * 4 + 3];
      }
    }

    设置图像数据

    CanvasRenderingContext2D.putImageData() 是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形,则只绘制该矩形的像素。此方法不受画布转换矩阵的影响。、

    原文地址: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData

    context.putImageData(imageData, x, y);

    Data URLs

    获取Data URL

    var dataURL = canvas.toDataURL();

    使用Data URL生成图像

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0);
    };
    
    imageObj.src = dataURL;

    合成

    合成操作

    context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

image.png


最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论