本文深入讲解了HTML5 Canvas的各种绘画技巧，包括基本图形绘制、路径创建、渐变填充、文字设置、阴影效果、图片处理等，是前端开发者不可多得的实战指南。
1.画布方法
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>画布方法</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 扩大上述绘制的矩形:scale()
// 在绘制图像之前扩大或缩小
// 平移上述绘制的矩形:translate()
// 旋转上述绘制的矩形:rotate()
// 绘制一个100*100矩形
canvas.fillStyle = "yellow";
//canvas.scale(0.5,0.5);
//canvas.translate(0,100);
canvas.rotate(30*Math.PI/180);
canvas.fillRect(100,10,100,100);
//canvas.scale(2);
</script>
</body>
</html>
效果图
2.绘制各种矩形
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas处理对象</title>
<script type="text/javascript">
window.onload = function(){
// 1 获取canvas元素
var canvas = document.getElementById("canvas");
// 2 通过canvas元素获取绘图上下文
var ctx = canvas.getContext("2d");
// 3 绘制各种各样的矩形
ctx.fillRect(0,0,100,200);//实心-->绘制填充
ctx.strokeRect(100,0,100,200);//绘制边框
ctx.clearRect(0,0,202,100);//擦除制定区域
// 4 制定填充颜色(在写字和绘图之前都要先上色)
ctx.strokeStyle = "rgb(255,0,0)";//所有边框颜色都为红色
ctx.fillStyle = "rgba(0,0,255,0.4)";//所有矩形填充颜色都为蓝色，且有0.3的透明度
// 5 重新绘制矩形
ctx.strokeRect(300,0,100,200);
ctx.fillRect(200,0,100,200);
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400px" height ="300px" style ="border: 1px solid #999">
您的浏览器不支持Canvas
</canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制矩形</title>
</head>
<body>
<canvas id="canvas" style="background:yellow" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 调用canvas对象的strokeRect()方法绘制空心矩形
canvas.strokeRect(10,10,100,100);
// 调用canvas对象的fillRect()方法绘制实心矩形
canvas.fillRect(140,10,100,100);
// 调用canvas对象的clearRect()方法清除指定区域
canvas.fillRect(260,10,100,100);
canvas.clearRect(270,20,80,80);
</script>
</body>
</html>
效果图
3.渐变填充
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas处理对象</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 1 创建渐变对象
var gra = ctx.createLinearGradient(100,150,300,150);
// 2 制定渐变颜色
gra.addColorStop(0,"red");
gra.addColorStop(1,"blue");
gra.addColorStop(0.2,"yellow");
// 3 通过渐变对象指定填充颜色
ctx.fillStyle = gra;
// 4 绘制实心图形
//ctx.fillRect(200,30,100,100);
ctx.fillRect(0,0,400,300);
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400px" height ="300px">
您的浏览器不支持Canvas
</canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建线性渐变</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 创建线性渐变
// 1 调用createLinearGradient()创建渐变的基准线
var grad = canvas.createLinearGradient(0,0,ele.width,ele.height);
// 2 调用addColorStop()设置渐变
grad.addColorStop(0,"yellow");
grad.addColorStop(0.5,"red");
grad.addColorStop(1,"blue");
// 3 调用fillRect()绘制渐变的矩形
canvas.fillStyle = grad;
canvas.fillRect(0,0,ele.width,ele.height);
</script>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建圆形渐变</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 1 创建圆形渐变
var grad = canvas.createRadialGradient(0,0,10,ele.width,ele.height,100);
// 2 使用addColorStop()设置渐变
grad.addColorStop(0,"yellow");
grad.addColorStop(0.5,"red");
grad.addColorStop(1,"blue");
// 3 绘制矩形
canvas.fillStyle = grad;
canvas.fillRect(0,0,ele.width,ele.height);
</script>
</body>
</html>
效果图
4.绘制路径
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas学习</title>
<script type="text/javascript">
window.onload =function () {
var canvas =document.getElementById('canvas');
ctx =canvas.getContext("2d");
// 0 开始路径
ctx.beginPath();
// 1 移动笔触到（180，50）
ctx.moveTo(180,50);
// 2 从笔触位置到（180，150）练成一条直线
ctx.lineTo(180,150);
// 3 从笔触（180，150）位置到（300，150）练成一条直线
ctx.lineTo(300,150);
// 4 从笔触（300，150）位置到（180，50）练成一条直线
ctx.lineTo(180,50);
// 5 闭合路径
ctx.closePath();
// 6 填充或描边
ctx.stroke();
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400" height ="300"></canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>创建路径</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
canvas.strokeStyle = "red";
canvas.fillStyle = "yellow";
// 创建路径
// 1 调用beginPath()
canvas.beginPath();
// 2 创建形状：矩形和圆形
canvas.rect(10,10,100,100);
// 3 绘制：stroke()和fill()
canvas.stroke();
canvas.beginPath();
canvas.rect(120,10,100,100);
canvas.fill();
canvas.beginPath();
canvas.rect(230,10,100,100);
canvas.fill();
canvas.stroke();
// 创建路径(圆形)
canvas.beginPath();
canvas.arc(55,170,50,0,Math.PI*3/2);
canvas.stroke();
canvas.beginPath();
canvas.arc(165,170,50,0,Math.PI*3/2);
canvas.fill();
canvas.beginPath();
canvas.arc(275,170,50,0,Math.PI*3/2);
canvas.fill();
canvas.stroke();
canvas.beginPath();
canvas.arc(55,280,50,0,Math.PI*3/2);
canvas.closePath();
canvas.stroke();
canvas.beginPath();
canvas.arc(165,280,50,0,Math.PI*3/2);
canvas.closePath();
canvas.fill();
canvas.beginPath();
canvas.arc(275,280,50,0,Math.PI*3/2);
canvas.closePath();
canvas.fill();
canvas.stroke();
</script>
</body>
</html>
效果图
5.叠加图形
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas学习</title>
<script type="text/javascript">
window.onload =function () {
var canvas =document.getElementById('canvas');
ctx =canvas.getContext("2d");
// 0 开始路径
ctx.beginPath();
// 1 移动笔触到（180，50）
ctx.moveTo(180,50);
// 2 从笔触位置到（180，150）练成一条直线
ctx.lineTo(180,150);
// 3 从笔触（180，150）位置到（300，150）练成一条直线
ctx.lineTo(300,150);
// 4 从笔触（300，150）位置到（180，50）练成一条直线
ctx.lineTo(180,50);
// 5 闭合路径
ctx.closePath();
// 6 填充或描边
ctx.stroke();
// 画圆
ctx.beginPath();
ctx.arc(200,150,50,0,Math.PI,true);
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400" height ="300"></canvas>
</body>
</html>
效果图
6.八卦图
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas学习-->八卦图</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//绘制左半圆
ctx.beginPath();
ctx.arc(200,150,50,Math.PI/2,Math.PI*3/2,false);
ctx.fillStyle ="#aaa";
ctx.fill();
ctx.closePath();
// 绘制左小半圆
ctx.beginPath();
ctx.arc(200,175,25,0,Math.PI/2,true);
ctx.fillStyle ="blue";
ctx.fill();
ctx.closePath();
// 绘制右半圆
ctx.beginPath();
ctx.arc(200,150,50,Math.PI/2,Math.PI*3/2,true);
ctx.fillStyle ="blue";
ctx.fill();
ctx.closePath();
// 绘制右小半圆
ctx.beginPath();
ctx.arc(200,125,25,Math.PI/2,Math.PI*3/2,true);
ctx.fillStyle ="#aaa";
ctx.fill();
ctx.closePath();
// 绘制左小半圆中的小点
ctx.beginPath();
ctx.arc(200,175,5,0,Math.PI*2,true);
ctx.fillStyle ="#aaa";
ctx.fill();
ctx.closePath();
// 绘制右小半圆中的小点
ctx.beginPath();
ctx.arc(200,125,5,0,Math.PI*2,true);
ctx.fillStyle ="blue";
ctx.fill();
ctx.closePath();
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400" height ="300" style="background:#ab5"></canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>八卦图</title>
</head>
<body>
<canvas id="canvas" style="background:yellow" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
canvas.beginPath();
canvas.fillStyle = "black";
canvas.arc(100,100,100,Math.PI/2,Math.PI*3/2);
canvas.fill();
canvas.beginPath();
canvas.fillStyle = "white";
canvas.arc(100,100,100,Math.PI*3/2,Math.PI/2);
canvas.fill();
canvas.beginPath();
canvas.fillStyle = "black";
canvas.arc(100,50,50,Math.PI*3/2,Math.PI/2);
canvas.fill();
canvas.beginPath();
canvas.fillStyle = "white";
canvas.arc(100,150,50,Math.PI/2,Math.PI*3/2);
canvas.fill();
canvas.beginPath();
canvas.fillStyle = "white";
canvas.arc(100,50,10,0,Math.PI*2);
canvas.fill();
canvas.beginPath();
canvas.fillStyle = "black";
canvas.arc(100,150,10,0,Math.PI*2);
canvas.fill();
</script>
</body>
</html>
效果图
7.图形绘制器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas学习</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
}
function btn_drawRect(){
ctx.strokeRect(0,0,100,100);
}
/*将显示效果扩大两倍*/
function btn_scale(){
//通过 ctx.scale(x,y)进行缩放
//x=1,y=1 表示原始大小
//x<1,y<1 表示缩小倍数
//x>1,y>1表示扩大倍数
// 调用之前的画布内容不会改变，之后绘制的东西，全部按照指定的倍数，进行显示
ctx.scale(2,2);
}
/*更换原点，每次点击，在原来的基础上向右下移动25*/
function btn_translate(){
ctx.translate(25,25);
}
/*
*将画布按顺时针方向旋转指定的度数
*度数：degree*Math.PI/180;
*/
function btn_rotate(){
ctx.rotate(45*Math.PI/180);
}
/*保存画布当前状态*/
function btn_save(){
ctx.save();
}
// 恢复画布状态到最近的保存点
function btn_restore(){
ctx.restore();
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400" height ="300" style="border:1px solid black;"></canvas>
<br/>
<br/>
<br/>
<br/>
<input type="button" value="绘制矩形" onclick="btn_drawRect()" />
<input type="button" value="扩大2倍" onclick="btn_scale()" />
<input type="button" value="更换原点" onclick="btn_translate()" />
<input type="button" value="旋转45度" onclick="btn_rotate()" />
<input type="button" value="保存当前画布状态" onclick="btn_save()" />
<input type="button" value="恢复状态到最近的保存点" onclick="btn_restore()" />
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制图像练习 - 螺旋图</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid #aaa"></canvas>
<button onclick="startGame();">开始</button>
<script>
function startGame(){
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 绘制一个颜色的矩形
canvas.fillStyle = "rgba(45,175,233,0.25)";
canvas.translate(150,20);
canvas.fillRect(0,0,100,50);
for(var i=1;i<=50;i++){
// 重新绘制一个与上述矩形相似的
canvas.translate(35,25);
canvas.scale(0.95,0.95);
canvas.rotate(Math.PI/10);
// 做了平移、扩大(缩小)和旋转
// 但是，绘制时与上述一致
canvas.fillRect(0,0,100,50);
}
}
</script>
</body>
</html>
效果图
8.线条的绘制
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Canvas学习</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
// 1 绘制普通的线段从(80,50)绘制到（250,50）
ctx.beginPath();
ctx.moveTo(80,50);
ctx.lineTo(250,50);
ctx.closePath();
ctx.stroke();
// 绘制一条宽度为10的线段(80,70),(250,70)
ctx.beginPath();
ctx.moveTo(80,70);
ctx.lineWidth ="10";
ctx.lineTo(250,70);
ctx.closePath();
ctx.stroke();
// 绘制一条宽度为10的线段(80,90),(250,90),线端使用圆帽形(ctx.lineCap = "round")
ctx.beginPath();
ctx.moveTo(80,90);
ctx.lineWidth = "10";
ctx.lineCap ="round";
ctx.lineTo(250,90);
ctx.stroke();
ctx.closePath();
// 绘制一条宽度为10的线段(80,110),(250,110),线端使用方形帽形(ctx.lineCap = "square")
ctx.beginPath();
ctx.moveTo(80,110);
ctx.lineWidth = "10";
ctx.lineCap ="square";
ctx.lineTo(250,110);
ctx.closePath();
ctx.stroke();
// 绘制两条线，形成一个锐角
ctx.beginPath();
ctx.lineWidth = "10";
ctx.lineJoin ="round";// bevel
ctx.moveTo(80,120);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.stroke();
ctx.closePath();
}
</script>
</head>
<body>
<canvas id ="canvas" width ="400" height ="300"></canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制直线或折线</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
canvas.strokeStyle = "blue";
// 创建路径
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(10,100);
canvas.lineTo(100,100);
canvas.stroke();
// 设置宽度路径
canvas.beginPath();
canvas.lineWidth = "10";
canvas.moveTo(120,10);
canvas.lineTo(120,100);
canvas.lineTo(200,100);
canvas.stroke();
// 设置线端点为圆形
canvas.beginPath();
canvas.lineWidth = "20";
canvas.lineCap = "round";
canvas.moveTo(240,10);
canvas.lineTo(240,100);
canvas.lineTo(300,100);
canvas.stroke();
// 设置两条线连接点的形状
canvas.beginPath();
canvas.lineWidth = "20";
canvas.lineJoin = "round";
canvas.moveTo(350,10);
canvas.lineTo(350,100);
canvas.lineTo(400,100);
canvas.stroke();
canvas.beginPath();
canvas.lineWidth = "10";
canvas.lineJoin = "miter";
canvas.miterLimit = 5;
canvas.moveTo(10,120);
canvas.lineTo(40,240);
canvas.lineTo(30,140);
canvas.stroke();
</script>
</body>
</html>
效果图
9.文字及设置文本基线
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Canvas学习</title>
<script type="text/javascript">
window.onload =function(){
var canvas =document.getElementById("canvas");
ctx =canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,150);
ctx.lineTo(800,150);
ctx.stroke();
ctx.closePath();
// 设置文本的相关属性
ctx.font ="bold italic 24px 微软雅黑";
ctx.textAlign ="center";
// 设置基线对齐方式--》字母基线
ctx.textBaseline ="alphabetic";
ctx.fillText("alphabetic",80,150);
// 通过measureText（）得到大小信息
var size = ctx.measureText("alphabetic");
// 通过size获取文字的width
console.log("alphabetic:"+size.width);
// 设置基线对齐方式--》悬挂
ctx.textBaseline ="hanging";
ctx.fillText("hagning",180,150);
// 设置基线对齐--》居中
ctx.textBaseline ="middle";
ctx.fillText("middle",280,150);
// 设置基线对齐--》靠上
ctx.textBaseline ="top";
ctx.fillText("top",380,150);
console.log("top:"+ctx.measureText("top").width);
// 设置基线对齐--》靠下
ctx.textBaseline ="buttom";
ctx.fillText("buttom",420,130);
}
</script>
</head>
<body>
<canvas id ="canvas" width ="800" height ="300" style ="border:1px solid black"></canvas>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 绘制文字
// 1 使用font属性设置文字
canvas.font = "bold 24px 宋体";
canvas.textAlign = "left";
canvas.strokeText("Left",80,80);
canvas.textBaseline = "top";
canvas.fillText("Top",160,80);
</script>
</body>
</html>
效果图
10.设置颜色
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>设置颜色</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 设置空心线的颜色
canvas.strokeStyle = "blue";
// 绘制一个空心矩形
canvas.strokeRect(10,10,100,100);
// 设置实心的颜色
canvas.fillStyle = "pink";
// 绘制一个实心矩形
canvas.fillRect(120,10,100,100);
canvas.fillStyle= "green";
canvas.globalAlpha = "0.5";
canvas.fillRect(140,30,60,60);
</script>
</body>
</html>
效果图
11.刮刮乐效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>刮刮乐抽奖</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
// 模拟刮的过程效果
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 1 在画布绘制一个实心矩形
canvas.fillStyle = "lightGray";
canvas.fillRect(100,100,200,50);
// 2 完成刮刮乐刮奖的效果
// a 指定一个鼠标的事件
//ele.onmousemove = function(event){}
ele.addEventListener("mousemove",getRs,false);
// b 该事件的处理函数
function getRs(event){
// 获取到当前鼠标的坐标值
// event.pageX和event.pageY
var x = event.pageX;
var y = event.pageY;
// 根据鼠标的坐标值绘制另一个是实心矩形
canvas.fillStyle = "white";
canvas.fillRect(x,y,5,5);
}
</script>
</body>
</html>
效果图
12.绘制阴影
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制阴影</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
canvas.fillStyle = "blue";
// 设置水平阴影
canvas.shadowColor = "red";
canvas.shadowOffsetX = 10;
canvas.shadowOffsetY = 10;
canvas.shadowBlur = -5;
canvas.fillRect(10,10,100,100);
</script>
</body>
</html>
效果图
13.切割图片、绘制图片、平铺图片
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>切割图像</title>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext("2d");
// 1 载入图片
var img = new Image();
img.src = "image.jpg";
img.onload = function(){
canvas.drawImage(img,0,0);
}
// 2 切割图片
canvas.beginPath();
canvas.strokeStyle = "white";
canvas.arc(115,155,30,0,Math.PI*2);
canvas.stroke();
canvas.clip();
</script>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制图片</title>
</head>
<body>
<img id="image" src="image.jpg">
<hr>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 将HTML页面中的图片引入到Canvas中
// 1 获取到HTML页面中的图片元素
var image = document.getElementById("image");
// 有些浏览器必须要求当图片加载完毕后，才能像Canvas中进行绘制
image.onload = function(){
// 2 利用drawImage()方法将该图片引入到Canvas中
canvas.drawImage(image,10,10);
}
</script>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>平铺图片</title>
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
<script>
var ele = document.getElementById("canvas");
var canvas = ele.getContext('2d');
// 动态读取一张图片
var img = new Image();
img.src = "image.jpg";
// 将图片载入到Canvas中
img.onload = function(){
// createPattern()方法并不表示绘制图片
// 设置要载入的图片是否平铺
var rpt = canvas.createPattern(img,'no-repeat');
canvas.fillStyle = rpt;
canvas.fillRect(0,0,ele.width,ele.height);
}
</script>
</body>
</html>
原图
扫一扫
2025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
