HTML5的canvas画布常用绘图命令总结

本文主要是介绍HTML5的canvas画布常用绘图命令总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文链接：http://shuaihua.cc/blog/20150311.php

阳光美美哒~

啊，首先要在HTML中新增一个canvas标签，然后给他一个身份证号，噗~就是id啦~

<canvas id="canvas"><⁄canvas>

之后在JavaScript中获取canvas这个DOM对象并进行一系列属性操作

//首先生命一个变量，我用来存放canvas画布的基本信息
var canvas_info = {"width":window.innerWidth,"height":window.innerHeight,"ratio":window.devicePixelRatio
};
//获取canvas DOM对象
var canvas = document.getElementById("canvas");
//获取canvas对象的2d上下文并复制给ctx这个变量，绘图部分基本上都是使用ctx这个上下文中的各种属性和方法。
var ctx = canvas.getContext("2d");
//设置画布的宽和高的CSS样式。
canvas.style.width = canvas_info.width + "px";
canvas.style.height = canvas_info.height + "px";
//为了适配不同设备的屏幕，需要将CSS样式里设置的宽高乘以设备的像素比，并将值设置给canvas画布的实际宽高，这样在某些设备中canvas画布内绘制的图像才不会出现放大失真的现象。
canvas.width = canvas_info.width * ratio;
canvas.height = canvas_info.height * ratio;

这一切都准备就绪之后，接下来我会列出几乎所有的canvas的2d上下文中的属性和方法，会提到如何设置或获取属性和使用方法！~~

其实一个很重要的学习各种API的方法就是将这个API实例化之后在控制台输出，这个对象的各种属性和方法都能找到。

//在控制台输出canvas的2d上下文ctx
console.log(ctx);

之后就逐个击破，逐个学习，综合运用~~

↓↓ 设置上下文的填充样式，值可以是CSS颜色，渐变对象，pattern对象 ↓↓
ctx.fillStyle = "#00ff00";↓↓ 设置或返回用于笔触的颜色、渐变或模式 ↓↓
ctx.strokeStyle = "#00f";↓↓ 设置或返回用于阴影的颜色 ↓↓
ctx.shadowColor = "#00f";↓↓ 设置或返回用于阴影的模糊级别 ↓↓
ctx.shadowBlur = 20;↓↓ 设置或返回阴影距形状的水平距离 ↓↓
ctx.shadowOfsetX = 20;↓↓ 设置或返回阴影距形状的垂直距离 ↓↓
ctx.shadowOfsetY = 20;↓↓ 设置或返回字体属性，值内的顺序不能混乱 ↓↓
ctx.font = "italic small-caps bold 10px 微软雅黑";↓↓ 设置或返回绘图的当前 alpha 或透明值 ↓↓
ctx.globalAlpha = 1;↓↓ 设置或返回新图像的覆盖方式 ↓↓
//新绘制的覆盖在已有的之上
ctx.globalCompositeOperation = "source-over";
//已有的覆盖在新绘制的之上
ctx.globalCompositeOperation = "destination-ove";↓↓ 设置上下文中的图像是否自动平滑处理，消除马赛克，默认为true ↓↓
ctx.imageSmoothingEnabled = true;↓↓ 线段端点的形状，默认为“butt”为平直的边缘/圆形线帽"round"/正方形线帽"square"， ↓↓
ctx.lineCap = "butt";↓↓ 设置或返回两条线相交时，所创建的拐角类型，包括bevel（斜角）round（圆角）miter（尖角） ↓↓
ctx.lineJoin = "butt";↓↓ 设置或返回当前的线条宽度 ↓↓
ctx.lineWidth = 3;↓↓ 设置或返回最大斜接长度 ↓↓
ctx.miterLimit = 3;↓↓ 设置或返回文本内容的当前对齐方式 ↓↓
ctx.textAlign = "center|end|left|right|start";↓↓ 设置或返回在绘制文本时使用的当前文本基线 ↓↓
ctx.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";↓↓ 返回 ImageData 对象的宽度 ↓↓
console.log(ctx.width);↓↓ 设置或返回 ImageData 对象的高度 ↓↓
console.log(ctx.height);↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);//----------------------------↓↓ 保存当前环境的状态 ↓↓
ctx.save();↓↓ 返回之前保存过的路径状态和属性 ↓↓
ctx.restore();↓↓ 创建新的、空白的 ImageData 对象，参数为宽和高 ↓↓
ctx.createImageData(100,100);↓↓ 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 ↓↓
ctx.getImageData(10,10,100,100);↓↓ 把图像数据（从指定的 ImageData 对象）放回画布上 ↓↓
ctx.putImageData(imgData,10,70);↓↓ 向画布上绘制图像、画布或视频 ↓↓
ctx.drawImage(img,0,0,100,100);↓↓ 在画布上绘制“被填充的”文本 ↓↓
ctx.fillText("Hello World!",100,100);↓↓ 在画布上绘制文本（无填充） ↓↓
ctx.strokeText("Hello World!",100,100);↓↓ 返回包含指定文本宽度的对象 ↓↓
ctx.measureText(txt).width;↓↓ 缩放当前绘图至更大或更小 ↓↓
ctx.scale(2,2);↓↓ 旋转当前绘图 ↓↓
ctx.rotate(20*Math.PI/180);↓↓ 重新映射画布上的 (0,0) 位置 ↓↓
ctx.translate(100,100);↓↓ 替换绘图的当前转换矩阵 ↓↓
ctx.transform(1,0.5,-0.5,1,30,10);↓↓ 将当前转换重置为单位矩阵。然后运行 transform() ↓↓
ctx.setTransform(1,0.5,-0.5,1,30,10);↓↓ 填充当前绘图（路径） ↓↓
ctx.fill();↓↓ 绘制已定义的路径 ↓↓
ctx.stroke();↓↓ 起始一条路径，或重置当前路径 ↓↓
ctx.beginPath();↓↓ 把路径移动到画布中的指定点，不创建线条 ↓↓
ctx.moveTo(30,30);↓↓ 创建从当前点回到起始点的路径 ↓↓
ctx.closePath();↓↓ 添加一个新点，然后在画布中创建从该点到最后指定点的线条 ↓↓
ctx.lineTo(100,100);↓↓ 从原始画布剪切任意形状和尺寸的区域 ↓↓
ctx.clip();↓↓ 创建二次贝塞尔曲线 ↓↓
ctx.quadraticCurveTo();↓↓ 创建弧/曲线（用于创建圆形或部分圆） ↓↓
ctx.arc();↓↓ 创建两切线之间的弧/曲线 ↓↓
ctx.arcTo();↓↓ 如果指定的点位于当前路径中，则返回 true，否则返回 false ↓↓
ctx.isPointInPath();↓↓ 创建矩形 ↓↓
ctx.rect();↓↓ 绘制“被填充”的矩形 ↓↓
ctx.fillRect();↓↓ 绘制矩形（无填充） ↓↓
ctx.strokeRect();↓↓ 在给定的矩形内清除指定的像素 ↓↓
ctx.clearRect();↓↓ 创建线性渐变（用在画布内容上） ↓↓
ctx.createLinearGradient();↓↓ 在指定的方向上重复指定的元素 ↓↓
ctx.createPattern();↓↓ 创建放射状/环形的渐变（用在画布内容上） ↓↓
ctx.createRadialGradient();↓↓ 规定渐变对象中的颜色和停止位置 ↓↓
ctx.addColorStop();