canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）-阿里云开发者社区

线的样式

线宽 lineWidth

lineWidth 是context对象的属性，用于描述线条的宽度，属性值为整数，默认值为1px。

strokeRect()方法绘制的矩形实际宽度是（width+lineWidth），实际高度是（height+lineWidth）
arc()方法绘制的圆形实际半径为（radius+lineWidth）。

             //lineWidth值为5
             cxt.lineWidth = 5;
             cxt.moveTo(20, 20);
             cxt.lineTo(180, 20);
             cxt.stroke();

             //lineWidth值为10
             cxt.beginPath();
             cxt.lineWidth = 10;
             cxt.moveTo(20, 70);
             cxt.lineTo(180, 70);
             cxt.stroke();

             //lineWidth值为15
             cxt.beginPath();
             cxt.lineWidth = 15;
             cxt.moveTo(20, 120);
             cxt.lineTo(180, 120);
             cxt.stroke();

必须使用beginPath()方法来开始新的路径，才可以绘制一个新的lineWidth属性

             cxt.lineWidth = 5;
             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);
             cxt.stroke();

线帽 lineCap

lineCap 是context对象的属性，用于描述线条开始处和结尾处的线帽样式，取值如下：

butt （默认值）无线帽
round 圆形线帽
square 正方形线帽

             cxt.lineWidth = 16;

             //lineCap值为默认值（butt）
             cxt.moveTo(20, 20);
             cxt.lineTo(180, 20);
             cxt.stroke();

             //lineCap值改为round
             cxt.beginPath();
             cxt.lineCap = "round";
             cxt.moveTo(20, 70);
             cxt.lineTo(180, 70);
             cxt.stroke();

             //lineCap值改为square
             cxt.beginPath();
             cxt.lineCap = "square";
             cxt.moveTo(20, 120);
             cxt.lineTo(180, 120);
             cxt.stroke();

必须使用beginPath()方法来开始新的路径，才可以绘制一个新的 lineCap 属性

round和square值会使线条稍微变长一点，因为它们给线条增加了线帽部分。

取值为round：每条线的头和尾都增加一个半圆，半圆的直径为线宽长度。
取值为square：每条线的头和尾都增加一个长方形，长方形的长度为线宽的一半，高度保持为线宽长度。

             cxt.moveTo(50, 50);
             cxt.lineTo(100, 50);
             cxt.lineTo(50, 100);
             cxt.lineTo(100, 100);
             cxt.lineWidth = 12;
             cxt.lineCap = "round";
             cxt.stroke();

lineCap属性只对线条的开始处和结尾处这两个地方起作用，而线段与线段交接的地方依然是“尖角”。

线的交点 lineJoin

lineJoin 是context对象的属性，用于描述两个线条交接处的样式，取值如下：

miter（默认值）尖角，线段在交接处延伸直至交于一点
round 圆角，圆角所在圆的直径等于线宽长度。
bevel 斜角，斜角所在正方形的对角线长等于线宽长度。

             cxt.moveTo(50, 50);
             cxt.lineTo(100, 50);
             cxt.lineTo(50, 100);
             cxt.lineTo(100, 100);
             cxt.lineWidth = 12;
             cxt.lineJoin = "miter";
             cxt.stroke();

cxt.lineJoin = "round";

cxt.lineJoin = "bevel";

虚线 setLineDash()

IE不支持

cxt.setLineDash(array);

array 是一个数组，如[10,5]表示的是“10px实线”和“5px空白”重复拼凑组合而成的线型。数组[10,5,5,5]表示的是“10px实线、5px空白、5px实线、5px空白”重复拼凑组合而成的线型。

             cxt.strokeStyle = "red";
             cxt.setLineDash([10,5]);
             cxt.strokeRect(50, 50, 80, 80);

绘制文本

文本属性：

font 文本样式（含大小，粗细，字体等），和css用法一样。默认值为10px sans-serif。

context.font = "font-style font-weight font-size/line-height font-family";

cxt.font = "bold 30px 微软雅黑";

fillStyle 填充样式
strokeStyle 描边样式

文本方法：

strokeText() 绘制描边文字
fillText() 绘制填充文字
measureText() 获取文本长度，单位为px（实际是占据空间矩形的长度）

// text 为目标文本
var length = cxt.measureText(text).width;

描边文本（空心文本）

strokeText(text , x , y , maxWidth)

text 文本内容
x 文本最左侧的坐标
y 文本最下方的坐标
maxWidth （可选）文本最大宽度，若文本超出最大宽度，会强制压缩

var text = "绿叶学习网";
cxt.font = "bold 30px 微软雅黑";
cxt.strokeStyle = "purple";
cxt.strokeText(text, 30, 60);

cxt.strokeText(text,30,60)改为cxt.strokeText(text,30,60,100)后，文本会压缩

填充文本

fillText(text , x , y , maxWidth)

text 文本内容
x 文本最左侧的坐标
y 文本最下方的坐标
maxWidth （可选）文本最大宽度，若文本超出最大宽度，会强制压缩

var text = "绿叶学习网";
cxt.font = "bold 30px 微软雅黑";
cxt.fillStyle = "purple";
cxt.fillText(text,30,60);

cxt.fillText(text,30,60) 改为cxt.fillText(text,30,60,100) 会压缩文字

文本水平居中

var text = "绿叶学习网";
cxt.font = "20px bold";
var textWidth = cxt.measureText(text).width;
var canvasWidth = cnv.width;
var xPosition = canvasWidth / 2 - textWidth / 2;

cxt.fillStyle = "purple";
cxt.fillText(text, xPosition, 50);

文本水平对齐方式 textAlign （用得少）

—— left 左对齐-在指定的横坐标的左侧开始

—— right 右对齐-在指定的横坐标的右侧结束

—— start 与阅读方向开始位置对齐（左到右阅读环境中，表现为左对齐）

—— end 与阅读方向结束位置对齐（左到右阅读环境中，表现为右对齐）

—— center 文本的中心被放置在指定的横坐标

//在横坐标150处绘制一条竖线
cxt.strokeStyle = "purple";
cxt.moveTo(150, 0);
cxt.lineTo(150, 200);
cxt.stroke();

cxt.font = "15px Arial";

cxt.textAlign = "start";
cxt.fillText("textAlign取值为start", 150, 30);
cxt.textAlign = "left";
cxt.fillText("textAlign取值为left", 150, 60);
cxt.textAlign = "end";
cxt.fillText("textAlign取值为end", 150, 90);
cxt.textAlign = "right";
cxt.fillText("textAlign取值为right", 150, 120);
cxt.textAlign = "center";
cxt.fillText("textAlign取值为center", 150, 150);

文本垂直对齐方式 textBaseline （用得少）

alphabetic 文本基线是普通英文字母的基线

top 文本基线是em方框的顶端
middle 文本基线是em方框的中心
bottom 文本基线是em方框的底端

//在纵坐标100处绘制一条横线
cxt.strokeStyle = "purple";
cxt.moveTo(0, 100);
cxt.lineTo(300, 100);
cxt.stroke();

cxt.font = "20px Arial";
cxt.textBaseline = "alphabetic";
cxt.fillText("alphabetic", 10, 100);
cxt.textBaseline = "top";
cxt.fillText("top", 110, 100);
cxt.textBaseline = "middle";
cxt.fillText("middle", 160, 100);
cxt.textBaseline = "bottom";
cxt.fillText("bottom", 230, 100);

操作图片

图片渲染

cxt.drawImage(image ,dx , dy);

image 为页面中的img元素，或js创建的image对象
dx,dy 为图片左上角的坐标

//创建image对象
var image = new Image();
image.src = "images/princess.png";
// 必须等图片加载完后，再进行渲染
image.onload = function () {
    cxt.drawImage(image, 40, 20);
}

<img id="pic" src="images/princess.png" alt=""/>

/*隐藏HTML中的img元素*/
#pic{display:none;}

var image = $$("pic");
cxt.drawImage(image, 40, 20);

图片取自页面中的img元素时，图片已完成了加载，所以无需添加 image.onload 等待加载。此时一般会用CSS隐藏图片，避免图片在页面中显示多次图片。

图片缩放

常用于Canvas游戏开发

cxt.drawImage(image , dx , dy ,dw , dh)

image 为页面中的img元素，或js创建的image对象
dx, dy 为图片左上角的坐标
dw , dh 为图片的宽度和高度

var image = new Image();
image.src = "images/princess.png";
image.onload = function () {
    cxt.drawImage(image, 40, 20, 60, 60);
}

图片裁剪（矩形裁剪）

此方法可以将部分图像复制到画布，类似于CSSSprite技术，从而使得图片只需要加载一次即可，这样极大地提高了速度（常用于Canvas游戏开发）。

cxt.drawImage(image , sx , sy , sw, sh , dx , dy , dw , dh)

image 为页面中的img元素，或js创建的image对象
sx, sy 为源图片截取部分的左上角坐标
sw , sh 为源图片截取部分的宽度和高度
dx, dy 为canvas中图片左上角的坐标

dw , dh 为canvas中图片的宽度和高度

var image = new Image();
image.src = "images/princess.png";
image.onload = function () {
    cxt.drawImage(image, 0, 0, 80, 80, 40, 20, 80, 80);
}

图片切割 clip()（自定义形状的裁剪）

//第1步，绘制基本图形，用来切割
cxt.beginPath();
cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true);
cxt.closePath();
cxt.stroke();

//第2步，使用clip()方法，使得切割区域为上面绘制的基本图形
cxt.clip();

//第3步，绘制一张图片
var image = new Image();
image.src = "images/princess.png";
image.onload = function () {
    cxt.drawImage(image, 10, 20);
}

图片平铺

var pattern = cxt.createPattern(image , type);
cxt.fillStyle = pattern;
cxt.fillRect();

type 来指定平铺方式
—— repeat （默认值）在水平方向和垂直方向同时平铺
—— repeat-x 只在水平方向平铺
—— repeat-y 只在垂直方向平铺
—— no-repeat 只显示一次

createPattern()方法不仅可以用于平铺图片，还可以用于平铺其他canvas元素或者平铺video元素（即视频），使用图片会有一定的加载时间，因此在实际开发中，对于一些基本的背景图案，会使用Canvas来绘制。

             var myImg = new Image();
             myImg.src = "images/flower.png";

             myImg.onload = function () {
                 var pattern = cxt.createPattern(myImg, "repeat");
                 cxt.fillStyle = pattern;
                 cxt.fillRect(0, 0, cnv.width, cnv.height);
             }

var pattern = cxt.createPattern(myImg, "repeat-x");

var pattern = cxt.createPattern(myImg, "repeat-y");

平铺 canvas

//创建canvas元素
var bgCanvas = document.createElement("canvas");
bgCanvas.width = 20;
bgCanvas.height = 20;

//在新创建的canvas中画一个圆
var bgCxt = bgCanvas.getContext("2d");
bgCxt.beginPath();
bgCxt.arc(10, 10, 10, 0, 360 * Math.PI / 180, true);
bgCxt.closePath();
bgCxt.fillStyle = "HotPink";
bgCxt.fill();

//平铺canvas
var pattern = cxt.createPattern(bgCanvas, "repeat-x");
cxt.fillStyle = pattern;
cxt.fillRect(0, 0, 200, 200);

用图片填充文字（用得少）

//创建image对象
var image = new Image();
image.src = "images/princess.png";

image.onload = function () {
    var text = "绿叶学习网";
    cxt.font = "bold 22px 微软雅黑";
    var pattern = cxt.createPattern(image, "no-repeat");
    cxt.fillStyle = pattern;
    cxt.fillText(text, 10, 50);
}

用图片填充图形

//创建image对象
var image = new Image();
image.src = "images/princess.png";

image.onload = function () {
    cxt.beginPath();
    cxt.arc(50, 50, 50, 0, 360 * Math.PI / 180, false);
    cxt.closePath();
    var pattern = cxt.createPattern(image, "no-repeat");
    cxt.fillStyle = pattern;
    cxt.fill();
}

图片特效

更高级的图片处理，如调整图片亮度、变黑白图片等需要对图片进行像素级处理，基本流程为：

获取图片的像素信息

var imgData = cxt.getImageData(x , y , width , height); 
var data = imgData.data;

—— x，y 为目标图片区域左上角的坐标

—— widht ，height 为图片区域的宽和高

此处的 imgData 是一个canvasPixelArray对象，其有属性 data，属性值为[r1,g1,b1,a1,r2,g2,b2,a2,……] 格式的描述一张图片像素数据的数组。imgData.data 数组中每四个数存储着1个像素的rgba颜色值，这四个数分别是该像素的红（r）、绿（g）、蓝（b）、透明度（a）。

imgData.data.length 即图片像素的总量。

修改图片的像素信息

即对 imgData.data 数组进行遍历处理，如颜色反转：

for (var i = 0; i < data.length; i += 4) 
{
   data[i + 0] = 255 - data[i + 0];
   data[i + 1] = 255 - data[i + 1];
   data[i + 2] = 255 - data[i + 2];
}

通过新像素信息渲染图片

cxt.putImageData(image , x , y);

—— image 为 canvasPixelArray对象（修改后的图片像素信息）

—— x,y 为图片渲染时的左上角坐标

canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（二）： https://developer.aliyun.com/article/1558613

canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）

线的样式

线宽 lineWidth

线帽 lineCap

线的交点 lineJoin

虚线 setLineDash()

绘制文本

描边文本（空心文本）

填充文本

文本水平居中

文本水平对齐方式 textAlign （用得少）

文本垂直对齐方式 textBaseline （用得少）

操作图片

图片渲染

图片缩放

图片裁剪（矩形裁剪）

图片切割 clip()（自定义形状的裁剪）

图片平铺

用图片填充文字（用得少）

用图片填充图形

图片特效

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）

线的样式

线宽 lineWidth

线帽 lineCap

线的交点 lineJoin

虚线 setLineDash()

绘制文本

描边文本（空心文本）

填充文本

文本水平居中

文本水平对齐方式 textAlign （用得少）

文本垂直对齐方式 textBaseline （用得少）

操作图片

图片渲染

图片缩放

图片裁剪（矩形裁剪）

图片切割 clip()（自定义形状的裁剪）

图片平铺

用图片填充文字（用得少）

用图片填充图形

图片特效

热门文章

最新文章

相关电子书

相关实验场景