HTML5画布(Canvas)速查表

HTML5 <canvas> 标签用于绘制图像。<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');

图形

绘制方形

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

填充区域

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

绘制方形的边框

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

绘制圆形

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();

图片

画图

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];
  }
}

设置图像数据

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';

HTML5画布(Canvas)速查表

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1349.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年2月20日 下午3:35
下一篇 2018年2月21日 上午10:09

99%的人还看了以下文章

  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    7.8K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    5.3K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    2.5K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    4.1K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    5.5K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    4.6K0

发表回复

登录后才能评论