当前位置：首页 > 全部内容 > 正文

JavaScript Canvas 2D 绘图基础：从矩形到渐变详解

作者：流萤

时间：2026-10-30

浏览：466

本文详细介绍 JavaScript Canvas 2D 上下文的绘图方法。涵盖设置画布尺寸、填充与描边样式、绘制矩形、路径、文本及图像。重点解析线性渐变与径向渐变的创建参数，以及模式填充的应用，帮助开发者掌握 Canvas 核心绘图技能。

文章目录

近期整理了关于 Canvas 绘图的学习笔记，现将主要内容梳理如下。

Canvas 基本用法与图像导出

1、基本用法

使用 <canvas> 元素时，必须预先设置 width 和 height 属性，以定义绘图区域的大小。在开始标签与结束标签之间放置的内容为后备信息，当浏览器不支持 <canvas> 时，将显示这些文本。示例代码如下：


<canvas id="drawing" width="200" height="200">A Drawing of something</canvas>

利用 toDataURL() 方法，可以将 <canvas> 元素上绘制的图像导出为数据 URI。


var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//取得图像的数据URI 
var imgURI=drawing.toDataURL("image/png"); 
alert(imgURI); 
//显示图像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
}

2D 上下文绘图详解

2、2D 上下文

（1）、填充和描边

填充是指使用指定样式填充图形内部；描边则是仅在图形边缘绘制线条。fillStyle 和 strokeStyle 属性的值可以是字符串、渐变对象或模式对象。


var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d");</span> 

<span style="font-size:14px;">//此程序由于没有图像，填充和描边不会显示 
context.strokeStyle="#0000ff"; 
context.fillStyle="red"; 
}

（2）、绘制矩形

矩形是唯一可以直接在 2D 上下文中绘制的形状。相关方法包括 fillRect()、strokeRect() 和 clearRect()。这三个方法均接收四个参数：x 坐标、y 坐标、宽度和高度。


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//绘制红色描边矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//绘制半透明的蓝色描边矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在两个矩形重叠的地方清除一个小矩形 
context.clearRect(30,30,30,30); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

以下程序演示了如何使用 toDataURL() 方法导出 Canvas 上绘制的图像：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<br /> 
<h3>下面为使用toDataURL()方法，导出在canvas元素上绘制的图像。</h3> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//绘制红色描边矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//绘制半透明的蓝色描边矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在两个矩形重叠的地方清除一个小矩形 
context.clearRect(30,30,30,30); 
//取得图像的数据URI 
var imgURI=drawing.toDataURL("image/png"); 
//显示图像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

Canvas 基本用法与图像导出

（3）、绘制路径

绘制路径前，必须先调用 beginPath() 方法，以指示开始绘制新路径。


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="420" height="420" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//开始路径 
context.beginPath(); 
/*绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 
以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle 
和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。 
*/ 
context.arc(130,130,90,0,2*Math.PI,false); 
/*arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给 
定的半径radius穿过(x1,y1) 
*/ 
context.arcTo(310,220,400,130,80) 
/*bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 
 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。 
*/ 
context.bezierCurveTo(320,210,400,250,310,300); 
/*lineTo(x,y):从上一点开始绘制一条直线，到(x,y)为止*/ 
context.lineTo(0,300); 
context.moveTo(130,220); 
context.lineTo(100,300); 
/*quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且 
以(cx,cy)作为控制点 
*/ 
context.quadraticCurveTo(40,380,130,400); 
context.lineTo(450,400); 
/*rect(x,y,width,height):从点（x,y）开始绘制一个矩形路径*/ 
context.rect(80,80,100,100) 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//开始路径 
context.beginPath(); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到（x,y），不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//绘制分针 
context.moveTo(100,100); 
context.lineTo(100,15); 
//绘制时针 
context.moveTo(100,100); 
context.lineTo(35,100); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

（4）、绘制文本

绘制文本主要涉及两个方法：fillText() 和 strokeText()。它们接收四个参数：要绘制的文本字符串、x 坐标、y 坐标以及可选的最大像素宽度。这两个方法拥有三个属性：font、textAlign 和 textBaseline。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//开始路径 
context.beginPath(); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到（x,y），不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//绘制分针 
context.moveTo(100,100); 
context.lineTo(100,20); 
//绘制时针 
context.moveTo(100,100); 
context.lineTo(35,100); 
//添加文字“12” 
context.font="bold 14px Arial"; 
context.textAlign="center"; 
context.textBaseline="middle";//文本的基线 
context.fillText("12",100,15); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

（5）、变换


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//开始路径 
context.beginPath(); 
//缩放图像 
/*scale(scaleX,scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。 
scaleX和scaleY的默认值都是1.0 
*/ 
context.scale(0.8,0.8); 
//绘制外圆 
context.arc(100,100,99,0,2*Math.PI,false); 
//绘制内圆 
context.moveTo(194,100);//将绘图游标移动到（x,y），不画线 
context.arc(100,100,94,0,2*Math.PI,false); 
//变换原点 
/*translate(x,y):将坐标原点移动到（x,y）。执行这个变换后，坐标(0,0)会变成之 
前由(x,y)表示的点 
*/ 
context.translate(100,100); 
//添加文字“12” 
context.font="bold 14px Arial"; 
context.textAlign="center"; 
context.textBaseline="middle";//文本的基线 
context.fillText("12",0,-85); 
//旋转表针 
/*rotate(angle):围绕原点旋转图像angle弧度*/ 
context.rotate(1); 
//绘制分针 
context.moveTo(0,0); 
context.lineTo(0,-80); 
//绘制时针 
context.moveTo(0,0); 
context.lineTo(-65,0); 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
//最后必须调用stroke()方法，这样才能把图像绘制到画布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

（6）、绘制图像


var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
var image=document.getElementById("image"); 
context.drawImage(image,10,10,20,20);//起点为(10,10)，图像大小会变成20x20像素； 
}

（7）、阴影


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//设置阴影 
context.shadowColor="rgba(0,0,0,0.5)"//设置阴影颜色 
context.shadowOffsetX=5;//设置形状或路径x轴方向的阴影偏移量，默认值为0； 
context.shadowOffsetY=5;//设置形状或路径y轴方向的阴影偏移量，默认值为0； 
context.shadowBlur=4;//设置模糊的像素数，默认值为0，即不模糊。 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制半透明的蓝色矩形 
  context.fillStyle="rgba(0,0,255,1)"; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

渐变与模式应用

（8）、渐变

渐变由 CanvasGradient 实例表示，通过 2D 上下文创建和修改较为简便。要创建线性渐变，可调用 createLinearGradient() 方法。该方法接收四个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标和终点的 y坐标。生成渐变对象后，需使用 addColorStop() 方法指定色标，该方法接收两个参数：色标位置和 CSS 颜色值。色标位置为介于 0（起始颜色）到 1（结束颜色）之间的数值。


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//设置渐变 
var gradient=context.createLinearGradient(30,30,70,70); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

为确保渐变与形状对齐，有时可借助函数来确保坐标设置恰当，例如：


function createRectLinearGradient(context,x,y,width,height){ 
  return context.createLinearGradient(x,y,x+width,y+height); 
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//设置渐变 
var gradient=createRectLinearGradient(context,30,30,50,50); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
//确保渐变与形状对齐 
function createRectLinearGradient(context,x,y,width,height){ 
  return context.createLinearGradient(x,y,x+width,y+height); 
} 
</script> 
</body> 
</html>

 Canvas 基本用法与图像导出

要创建径向渐变（或放射渐变），可使用 createRadialGradient() 方法。该方法接收六个参数，分别对应两个圆的圆心坐标和半径。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>canvas绘图</title> 
</head> 
<body> 
<canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> 
<script> 
var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
//设置渐变 
var gradient=context.createRadialGradient(55,55,10,55,55,30); 
gradient.addColorStop(0,"white"); 
gradient.addColorStop(1,"black"); 
//绘制红色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//绘制渐变矩形 
  context.fillStyle=gradient; 
context.fillRect(30,30,50,50); 
} 
</script> 
</body> 
</html>

Canvas 基本用法与图像导出

（9）、模式

模式即重复的图像，可用于填充或描边图形。


var drawing=document.getElementById("drawing"); 
//确定浏览器支持<canvas>元素 
if(drawing.getContext){ 
//取得绘图上下文对象的引用，“2d”是取得2D上下文对象 
var context=drawing.getContext("2d"); 
  var image=document.images[0]; 
pattern=context.createPattern(image,"repeat"); 
  context.fillStyle=pattern; 
context.fillRect(10,10,150,150); 
}

以上内容为本文的全部总结，希望对各位的学习有所帮助，也欢迎大家继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

怎么在 Vue 或 React 项目中正确集成 animate.js

JS注册事件：addEventListener基础语法与参数详解

JSP和JS的区别：运行环境与服务端/客户端职责解析

pdf.js 官方下载地址：GitHub Release 获取预编译包

前端学习路径：为什么建议先掌握HTML再学习JavaScript？

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例