canvas基本使用（获取画布、绘制矩形、清除屏幕内容、动画、绘制不规则图形、圆形、虚线、绘制文字、颜色渐变、设置阴影、渲染图片、变形偏移、canvas文档、Konva）

原创

已于 2024-07-19 11:34:40 修改 · 4.7k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#canvas基本使用指导 #获取画布、绘制矩形、清屏、动画 #绘制文字、颜色渐变、设置阴影 #canvas视频截图 #canvas图片灰度处理 #canvas图片下载

于 2022-06-05 19:34:10 首次发布

本文详细介绍了HTML5 Canvas的基本用法，包括获取画布、绘制矩形、圆形、不规则图形、文字、颜色渐变、阴影效果、图片渲染及变形偏移等操作。同时，讲解了如何实现canvas动画和像素化效果，并展示了html节点转canvas并导出为base64图片的实现方法。此外，还涉及到html2canvas库的使用，用于将DOM转换为canvas并下载为图片。

canvas使用

获取画布

var canvas = document.getElementById(canvasID)

vat ctx = canvas.getContext('2d')

绘制矩形

ctx.fillStyle = 'red'

ctx.fillRect(100,100,200,50)

ctx.strokeStyle = 'blue'

ctx.strokeRect(300,100,200,50)

清除屏幕内容（动画）

ctx.clearRect(0,0,600,600)

ctx.strokeStyle = 'yellow'

ctx.stroke()

ctx.fillStyle = 'blue'

ctx.fill()

绘制圆形

ctx.arc(x,y,radius,start,end,anticlockwise)

设置绘制属性（线条属性、虚线等）

ctx.globalAlpha = 0.1

ctx.lineWidth = 1

ctx.lineCap = ’round‘

ctx.lineJoin = 'round'

ctx.setLineDash([4,20,...,])

绘制文字

ctx.font='30px 宋体'

ctx.fillText(str,x,y)

ctx.textAlign = 'center'

颜色渐变

let linear = ctx.createLinearGradient(100,100,200,200)

linear.addColorStop(0,'red')

设置阴影

ctx.shadowOffsetX|Y = 1

ctx.shadowBlur = 20

ctx. shadowColor = 'red'

渲染图片

ctx.drawImage(img,x0,y0,w0,y0,x1,y1,w1,h1)

ctx.transform(a,b,c,d,e,f)

canvas.toDataURL(type,encoderOptions)

压缩图片

视频截图

ctx.getImageData(x,y,width,height)

ctx.putImageData(ImageData,x,y)

图片灰度处理

html节点转canvas转base64图片下载示例（html2canvas）

canvas使用

canvas标签的宽和高使用属性设置，用css的样式设置会导致画布失真。

获取画布

var canvas = document.getElementById(canvasID)

得到画布上下文，有两个分别为2d和3d的上下文，

vat ctx = canvas.getContext('2d')

选择2d的上下文，所有的图像绘制都是通过ctx属性或者事方法进行设置，和canvas标签没有关系了。

绘制矩形

ctx.fillStyle = 'red'

设置下次填充内容的颜色为红色。注意要在绘制内容前设置颜色不然无法生效。

ctx.fillRect(100,100,200,50)

绘制填充矩形，前2个参数为x，y轴坐标，后2个参数为x、y轴方向的长度（x轴为水平向右，y轴垂直向下）。

ctx.strokeStyle = 'blue'

设置下次绘制线条颜色为蓝色。注意要在绘制内容前设置颜色不然无法生效。

ctx.strokeRect(300,100,200,50)

绘制矩形边框，前2个参数为x，y轴坐标，后2个参数为x、y轴方向的长度（x轴为水平向右，y轴垂直向下）。

清除屏幕内容（动画）

ctx.clearRect(0,0,600,600)

清除矩形范围内容，前2个参数为x，y轴坐标，后2个参数为x、y轴方向的长度。

像素化

使用canvas 绘制图片成功后就会像素化，无法从画布上再次得到这个图形（即无法修改画布内容，flash可以）。

注意canvas动画是通过清屏-更新-渲染的逻辑进行。

绘制不规则图形

每次设置完绘制的线条后需要调用ctx.stroke()绘制内容。

ctx.beginPath()

创建路径

ctx.moveTo(100,100)

设置起点坐标。

ctx.lineTo(200,200);

设置下一点坐标以及连接方式为直线。

ctx.closePath()

封闭路径，将最后一点坐标和起点坐标相连。注意用fill填充时，不写该条语句也会自动相连。

ctx.strokeStyle = 'yellow'

设置边框颜色

ctx.stroke()

通过线条绘制图形轮廓。

ctx.fillStyle = 'blue'

设置填充颜色。

ctx.fill()

通过填充路径的内容区域生成实心的图形。

绘制圆形

ctx.arc(x,y,radius,start,end,anticlockwise)

绘制圆弧，x、y为绘制圆弧的圆心；radius为半径；start为起始弧度（0表示x轴即水平向右）；end为结束弧度（顺时针时，是按起始弧度转end-start弧度，即相差2π时绘制的是圆，逆时针旋转时，是从start弧度逆时针转到end弧度，且start、end弧度是按照顺时针的弧度，大于2π时%2π）；anticlockwise为是否逆时针转，false为顺时针旋转；

// 圆点的中心坐标
var centerX = 50;
var centerY = 50;
// 圆点的半径
var radius = 5;
// 起始角度和结束角度设置为相同的值
// 使用2*Math.PI，因为我们只想画一个圆点，而不是整个圆
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();