Canvas文档 #39
Comments
canvas 文档目录
1. 绘制形状Canvas 画布提供了一个作图的平面空间，该空间的每个点都有自己的坐标。原点 路径图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
以下方法和属性用来绘制路径：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 笑脸
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制外圆
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
ctx.strokeStyle = "blue"
ctx.stroke();
// 扇形
ctx.beginPath();
ctx.moveTo(83, 102);
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); // 左上1/4圆
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); // 右上1/4圆
ctx.lineTo(97, 116);
ctx.lineTo(83, 102);
ctx.strokeStyle = 'red'
ctx.stroke();
}
}线型
线形的控制属性
弧线
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
// `x, y`: 圆弧对应的圆心横坐标
// `radius`: 圆弧的半径大小。
// `startAngle`: 圆弧开始的角度，单位是弧度。
// `endAngle`: 圆弧结束的角度，单位是弧度。
// `anticlockwise`: 画图时应该逆时针画（true）还是顺时针画（false），这个参数用来控制扇形的方向（比如上半圆还是下半圆）。
context.arcTo(x1, y1, x2, y2, radius)
// `x1, y1`: 是第1个控制点的横坐标；
// `x2, y2`: 是第2个控制点的横坐标；
// `radius`: 是圆弧的半径大小。
贝塞尔曲线
椭圆
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
// `x, y`: 椭圆圆心的坐标
// `radiusX`: 椭圆长轴的半径
// `radiusY`: 椭圆短轴的半径
// `rotation, startAngle`: 椭圆将要绘制的起始点和结束点角度，以弧度表示(非角度度数)。
// `anticlockwise`: 如果为 true，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。
// Demo
ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); //倾斜45°角Path2D 对象正如我们所讲，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能， 所有的路径方法比如 const square = new Path2D("M10 10 h 80 v 80 h -80 Z")
ctx.stroke(square)矩形以下方法用来绘制矩形：
上面四个方法的格式都一样，都接受四个参数，分别是矩形左上角的横坐标和纵坐标、矩形的宽和高。 const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// line画矩形路径，填充
ctx.moveTo(10, 100)
ctx.lineTo(60, 100)
ctx.lineTo(60, 150)
ctx.lineTo(10, 150)
ctx.fillStyle = 'pink'
ctx.fill()
// rect画矩形路径，填充
ctx.beginPath()
ctx.rect(10, 10, 50, 50)
ctx.fillStyle = 'blue'
ctx.fill()
// fillRect 画矩形
ctx.fillStyle = 'green'
ctx.fillRect(80, 10, 50, 50)
// strokeRect 矩形描边
ctx.strokeStyle = 'red'
ctx.strokeRect(150, 10, 50, 50)
// clearRect 清除矩形区域内容
ctx.clearRect(40, 30, 60, 20)文本canvas 提供了
文本样式属性：
渐变和图案填充
线性渐变
该方法的返回值是一个 var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);辐射渐变
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
图像填充
ctx.createPattern(image, repetition)该方法接受两个参数，第一个参数是图像数据，它可以是 该方法的返回值是一个 var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://example.com/pattern.png';
img.onload = function( ) {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 400, 400);
};阴影
透明度通过设置
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// 画背景框
ctx.fillStyle = '#6C0';
ctx.fillRect(0, 0, 150, 75);
ctx.fillStyle = 'rgba(0, 153, 255, 0.8)';
ctx.fillRect(0, 75, 150, 75);
// 设置透明度值
ctx.globalAlpha = 0.2;
// 画半透明圆
ctx.fillStyle = '#FFF'
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}合成与裁剪合成 globalCompositeOperation我们不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像
裁剪路径 clip裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.arc(0,0,60,0,Math.PI*2,true);
ctx.clip(); // 创建一个扇形的裁剪区域
// draw background
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, 'blue');
lingrad.addColorStop(1, 'red');
ctx.fillStyle = lingrad;
ctx.fillRect(0,0,150,150);状态的保存和恢复
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。一个绘画状态包括：
可以调用任意多次 save方法。每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。 const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillRect(0,0,300,300);
ctx.save(); // 保存默认状态
ctx.fillStyle = 'blue' // 蓝色状态
ctx.fillRect(25,25,250,250);
ctx.save(); // 保存当前状态
ctx.fillStyle = 'red' // 红色状态
ctx.fillRect(50,50,200,200);
ctx.restore(); // 恢复至蓝色状态
ctx.fillRect(75,75,150,150)
ctx.restore(); // 恢复至默认状态
ctx.fillRect(100,100,100,100)其他属性和方法
2. 图像变换以下方法用于图像变换。
旋转顺时针旋转的弧度。
rotate(angle);
// angle : Canvas画布坐标系旋转的角度，单位是弧度。注意，此旋转和CSS3的旋转变换不一样，旋转的是坐标系，而非元素。因此，实际开发的时候，旋转完毕，需要将坐标系再还原。画布和图片同步旋转 demo ： var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
var width = canvas2.width;
var height = canvas2.height;
// 加载图片素材
var img = new Image();
img.onload = function () {
// 先位移坐标到中心
context.translate(width / 2, height / 2);
// 旋转90度
context.rotate(90 * Math.PI / 180);
// 此时按照旋转后的尺寸
// 把定位中心移动到左上角
context.translate(-1 * height / 2, -1 * width / 2);
// 绘制图片
context.drawImage(this, 0, 0, height, width);
// 坐标系还原到初始
context.setTransform(1, 0, 0, 1, 0, 0);
};
img.src = './1.jpg';缩放根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。
ctx.scale(x, y)
// x : Canvas坐标系水平缩放的比例。支持小数，如果值是-1，表示水平翻转。
// y : Canvas坐标系垂直缩放的比例。支持小数，如果值是-1，表示垂直翻转。位移将 canvas 按原始 x点的水平方向、原始的 y点垂直方向进行平移变换。 ctx.translate(x, y);矩阵
context.transform(a, b, c, d, e, f);
/*
a:水平缩放(默认值1，单位倍数)
b:水平倾斜(默认值0，单位弧度)
c:垂直倾斜(默认值0，单位弧度)
d:垂直缩放(默认值1，单位倍数)
e:水平位移(默认值0，单位像素)
f:垂直位移(默认值0，单位像素)
*/下面是一个例子。 const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// step 1
ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);
// step 2
ctx.setTransform(1, 0, 0, 1, 0, 100);
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 100, 100);上面代码中：step1将原始图形是 100 x 100 的矩形，结果缩放成 200 x 100 的矩形，并且左上角从
图像处理绘制图片Canvas API 允许将图像文件写入画布，做法是读取图片后，使用
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);各个参数的含义如下。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const img = new Image()
img.crossOrigin = 'anonymous' // 解决图片跨域问题
img.onload = function() {
// 拉伸图片同时保持图片比例
ctx.drawImage(img, 0, 42, 500, 250, 0, 0, 300, 150)
}
img.src = 'https://www.canvasapi.cn/assets/images/examples/500/1.jpg' // 图片实际宽高 500333如何让一张尺寸为 上面的示例关键如何理解 像素读写
getImageData()
context.getImageData(sx, sy, sWidth, sHeight)
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
putImageData()
ctx.putImageData(imagedata, dx, dy)
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)该方法有如下参数。
createImageData()
ctx.createImageData(width, height)
ctx.createImageData(imagedata)
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.createImageData(100, 100);上面代码中， 4. 动画canvas画布可能最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不对所有东西（包括之前的）进行重绘。重绘是相当费时的，而且性能很依赖于电脑的速度。 动画的基本步骤： 可以通过以下的步骤来画出一帧:
5. canvas元素方法Canvas.getContext()``HTMLCanvasElement.getContext()` 返回canvas 的上下文，如果上下文没有定义则返回 null // 语法
canvas.getContext(contextType);
canvas.getContext(contextType, contextAttributes);参数说明
Canvas.toDataURL()
canvas.toDataURL(type, quality)
该方法的返回值是一个 Data URI 格式的字符串。 function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL('image/png');
return image;
}上面的代码将 var fullQuality = canvas.toDataURL('image/jpeg', 0.9);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.6);
var lowQuality = canvas.toDataURL('image/jpeg', 0.3);上面代码将 Canvas.toBlob()
// 格式
canvas.toBlob(callback, mimeType, quality)
// 示例
canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)
注意，该方法没有返回值。 下面的例子将 var canvas = document.getElementById('myCanvas');
function blobToImg(blob) {
var newImg = document.createElement('img');
var url = URL.createObjectURL(blob);
newImg.onload = functio () {
// 使用完毕，释放 URL 对象
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
}
canvas.toBlob(blobToImg); |
HTML Canvas 参考手册
HTML 描述HTML5 <获得用于在画布上绘图的对象获得用于在画布上绘图的对象> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过， getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 本手册提供完整的 颜色、样式和阴影
线条样式
矩形
路径
转换
文本
图像绘制
像素操作
合成
其他
|
awesome-canvas精心收录Canvas相关的资源并整理分类，部分同类资源库也收录SVG/WebGL相关的资源。 简体中文 | English 目录教程
书籍
仓库图形绘制
3D库
VR/AR
物理引擎
游戏引擎
流程图
甘特图
组织图图编辑
电子表格
图表库
海报截图
数据处理
图像处理
画板
签名
波纹动画
粒子动画
路径动画二维码
验证码
运行时
其他
插件资源网站
效果/案例
文章
|
Three.js教程扩展库 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
目录
系列教程
The text was updated successfully, but these errors were encountered: