本文介绍了HTML5画布的基本使用，包括绘制矩形、圆形、直线、曲线、渐变、图像和文字等，并提供了一个生动的太极图绘制示例，帮助读者掌握canvas的绘图技巧。
画布
1、绘制矩形：
（1）使用原生的js，获取画布元素
（2）获取2d上下文对象
（3）设置绘图样式，绘制填充的矩形
context.fillStyle=“pink”;
（4）设置参数
context.fillRect(0,0.100,200);
（5）绘制边框矩形
context.lineWide=5;
（6）设置边框样式
context.strokeStyle=“red”;
（7）设置边框的长宽高
context.strokeRect();
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
//使用原生js
window.onload=function(){
//获取画布元素
var canvas=document.getElementById("canvas");
//获取2d上下文对象
var context=canvas.getContext("2d");
//设置绘图样式
//绘制填充矩形
context.fillStyle="pink";
//参数 x,y,宽，高
context.fillRect(0,0,100,200);
//绘制边框矩形
context.lineWidth = 5
//设置边框样式
context.strokeStyle="skyblue"
context.strokeRect(100,100,100,100)
//绘制四个矩形拼接成一个大矩形
context.strokeStyle="blue"
context.strokeRect(205,100,100,100)
context.strokeStyle="red"
context.strokeRect(100,205,100,100)
context.strokeStyle="green"
context.strokeRect(205,205,100,100)
//清除某一个区域内的矩形
context.clearRect(25,25,50,150);
context.clearRect(175,175,50,50);
}
</script>
</body>
</html>
2、绘制圆形
（1）开始创建路径
context.beginPath()
（2）绘制圆形的路径；参数：圆心x坐标 y坐标 半径 开始角度 结束角度 绘制方向（true为逆时针，默认）
context.arc(200,200,100,0,Math.PI*2,true);
（3）关闭路径
context.closePath();
（4）填充的颜色
context.fillStyle=“red”;
context.fill(); //必须加！！！！否则不会显示
例子：
<script>
window.οnlοad=function(){
//获取canvas
var canvas=document.getElementById("canvas");
//获取上下文
var context=canvas.getContext("2d");
//绘制图形
//开始创建路径
context.beginPath();
//绘制圆形的路径 参数 圆心x坐标 y坐标 半径 开始角度 结束角度 绘制方向（true为逆时针）
context.arc(200,200,100,0,Math.PI*2,true);
//关闭路径
//context.closePath();
//填充的
//填充的颜色
context.fillStyle="coral";
context.fill();
//边框设置
//context.stroke();
//绘制另一个圆
//context.beginPath();
context.arc(300,300,50,0,Math.PI*2);
context.closePath();
context.fill();
}
</script>
3、绘制直线：（5、6步骤可加可不加）
（1）打开绘制路径
context.beginPath();
（2）设置直线的起点坐标
context.moveTo(0,0);
（3）设置直线的终点坐标
context.lineTo(50,50);
（4）结束路径
context.closePath();
（5）设置颜色
context.strokeStyle=“pink”
（6）设置宽度
context.lineWidth=4;
（7）使其绘制到画布上
context.stroke();
例子：
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.οnlοad=function(){
//获取canvas
var canvas=document.getElementById("canvas");
//获取2d上下文
var context=canvas.getContext("2d");
//打开路径
context.beginPath();
//直线的起点
context.moveTo(0,0);
//直线的终点
context.lineTo(50,50);
//结束路径
context.closePath();
//设置颜色
context.strokeStyle="pink";
//设置宽度
context.lineWidth=4;
//绘制到画布
context.stroke();
}
</script>
4、绘制折线
（1）打开绘制路径
context.beginPath();
（2）设置折现线的起点坐标
context.moveTo(0,0);
（3）设置折线的结束点坐标
context.lineTo(100,100);
context.lineTo(200,100);
context.lineTo(300,200);
context.lineTo(350,300);
context.lineTo(400,400);
（4）设置颜色
context.strokeStyle=“pink”
（5）设置宽度
context.lineWidth=4;
（6）使其绘制到画布上
context.stroke();
5、绘制曲线
（1）打开绘制路径
context.beginPath();
（2）设置折现线的起点坐标
context.moveTo(0,0);
（3）
类一：贝塞尔曲线
bezier曲线 以(c1x, c1y)和(c2x, c2y)为控制点，曲线会圆滑的靠近这两个控制点。
参数（c1x,c1y,c2x,c2y,x,y）
context.bezierCurveTo(0,100,100,400,400,400);
类二：二次贝塞尔曲线
quadratic曲线 终点 从上一点开始绘制一条贝塞尔曲线 到（x,y）为止，并以（cx,cy）为控制点
参数：（cx,cy,x,y）
context.quadraticCurveTo(350,0,400,400);
（4）绘制到画布上
context.stroke();
例子：
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.οnlοad=function(){
//获取cnavas
var canvas=document.getElementById("canvas");
//获得2d画布
var context=canvas.getContext("2d");
//打开路,径
context.beginPath();
//曲线的起点
context.moveTo(0,0);
//bezier曲线 以(c1x, c1y)和(c2x, c2y)为控制点，曲线会圆滑的靠近这两个控制点。
context.bezierCurveTo(0,100,100,400,400,400);
//quadratic曲线
//quadraticCurveTo(cx,cy,x,y)
context,moveTo(0,0);
//quadratic曲线 终点 从上一点开始绘制一条贝塞尔曲线 到（x,y）为止，并以（cx,cy）为控制点
context.quadraticCurveTo(350,0,400,400);
//绘制路径
context.stroke();
}
</script>
6、渐变
（1）
类一：线性渐变
创建渐变对象
参数：起始点x坐标，起始点y坐标,结束点x坐标，结束点y坐标
var g=context.createLinearGradient(100,0,300,400);
类二：径性渐变
创建径性渐变
参数：起始圆的圆心x坐标，y坐标，半径，结束圆的圆心x坐标，y坐标，半径
var g=context.createRadialGradient(200,200,100,200,200,200);
（2）增加渐变的颜色
参数：0-1之间偏移量 颜色量
g.addColorStop(0.2,“red”);
g.addColorStop(0.4,“yellow”);
g.addColorStop(0.6,“pink”);
（3）设置填充渐变
context.fillStyle=g;
（4）使用渐变绘制矩形
context.fillRect(0,0,400,400);
例子：
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//渐变
//填充模式
//创建线性渐变对象 参数：起始点x坐标，起始点y坐标,结束点x坐标，结束点y坐标
var g= context.createLinearGradient(100,0,300,400);
//添加渐变颜色 参数：0-1之间偏移量 颜色值
g.addColorStop(0.2,"red");
g.addColorStop(0.4,"yellow");
g.addColorStop(0.6,"pink");
//渐变对象的使用
//设置填充渐变
context.fillStyle = g;
//使用渐变绘制矩形
context.fillRect(0,0,400,400);
}
</script>
7、绘制变形
（1）绘制矩形
context.fillRect(0,0,100,100);
（2）
类一：平移问题
参数：坐标原点在x轴方向移动的单位，y轴中移动的单位
context.translate(100,100);
类二：扩大或缩小
参数：水平方向的放大倍数，垂直方向放大的倍数
context.scale(0.5,0.5);
类三：旋转
参数：旋转的角度
旋转的中心点是坐标轴的原点，旋转是以顺时针方向进行的，要想逆时针旋 转时，将angle设定为负数即可
context.rotate(0.5,0.5);
例子：
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.οnlοad=function(){
//获取canvas
var canvas=document.getElementById("canvas");
//获取2d上下文
var context=canvas.getContext("2d");
//绘制矩形
context.fillRect(0,0,100,100);
//平移 context.translate（x,y）参数：坐标原点在x轴方向移动的单位，y轴中移动的单位
context.translate(100,100);
//context.fillRect(0,0,100,100);
//扩大或缩小
context.scale(0.5,0.5);
//context.fillRect(0,0,100,100);
//旋转 rotate(angle) 参数角度
context.rotate(0.5,0.5);
context.fillRect(0,0,100,100);
}
</script>
8、绘制图像
（1）创建图像
var image=new Image();
（2）获取图像地址
image.src="./bg.jpg";
（3）监听图像是否加载完毕，完毕后再绘制
（以下步骤都要写在该函数内！！！）
image.οnlοad=function(){}
（4）绘制图像
参数：图像对象 绘制位置的起始x坐标，y坐标，绘制图像的宽高
context.drawImage(image,0,0,100,100);
（5）图像平铺
参数图片对象 平铺的类型
var pattern=context.createPattern(image,‘repeat-x’);
context.fillStyle=pattern;
context.fillRect(0,0,400,400);
（6）图像裁剪
context.beginPath();
context.arc(50,50,50,0,Math.PI*2);
（7）结束路径
context.closePath();
（8）裁切只有在裁切范围内的才能显示出来
context.clip();
例子：
<canvas id="canvas" width="400px" height="400px">
</canvas>
<script >
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//绘制图像
//创建图像对象
var image=new Image();
image.src="./bg.jpg";
//监听图像是否加载完毕 完毕后再绘制
image.οnlοad=function(){
//绘制图像 context.drawImage(image,x,y,w,h) 参数：图像对象 绘制位置的起始x坐标，y坐标，绘制图像的宽高
context.drawImage(image,0,0,100,100);
//图像平铺 参数图片对象 平铺的类型
// var pattern=context.createPattern(image,'repeat-x');
// context.fillStyle=pattern;
// context.fillRect(0,0,400,400);
//图像裁剪
context.beginPath();
context.arc(50,50,50,0,Math.PI*2);
context.closePath();
//裁切只有在裁切范围内的才能显示出来
context.clip();
}
}
</script>
9、绘制文字
（1）设置字体
context.font=“italic 90px sans-serif”;
（2）设置文本的对齐方式
context.textAlign=“center”;
（3）设置文本的基线
context.textBaseline=“middle”;
（4）将文字绘制到画布上—使用fillStyle属性绘制填充文本
参数：文本 x坐标 y坐标 宽度
context.fillText(“hello canvas”,100,100,100);
（5）向文本描边----勾勒文本
参数：文本 x坐标 y坐标 宽度
context.strokeText(“ssdg sdf”,100,100,100);
例子：
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.οnlοad=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//设置字体
context.font="italic 90px sans-serif";
//绘制一条baseline
context.moveTo(100,100);
context.lineTo(200,100);
context.strokeStyle="red";
context.stroke();
//文本的基线
context.textBaseline="middle";
//绘制文字到画布上
context.fillText("hello canvas",100,100,100);
//勾勒文本
context.strokeText("hello canvas",100,100,100);
}
</script>
太极图（小例子）
会动的哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 让画布旋转 */
canvas{
/* border: 1px solid red; */
/* 动画名称 */
animation-name: rotateAnimation;
animation-duration: 5s;
/* 动画时长 */
animation-iteration-count: infinite;
/* 动画速度 */
animation-timing-function: linear;
}
@keyframes rotateAnimation{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<canvas id="canvas" width="400px" height="400px"></canvas>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//绘制两个半圆
//左边半圆
//开始创建路径
context.beginPath();
context.arc(200,200,200,Math.PI/2,Math.PI*3/2);
//填充半圆区域
context.fillStyle="yellow";
context.fill();
context.closePath();
//右边半圆
context.beginPath();
context.arc(200,200,200,Math.PI*3/2,Math.PI/2);
//填充半圆区域
context.fillStyle="#000";
context.fill();
context.closePath();
//绘制上面的中圆
context.beginPath();
context.arc(200,100,100,0,Math.PI*2);
context.fillStyle="yellow";
context.fill();
context.closePath();
//绘制下面的圆
context.beginPath();
context.arc(200,300,100,0,Math.PI*2);
context.fillStyle="#000";
context.fill();
context.closePath();
//小圆
context.beginPath();
context.arc(200,100,40,0,Math.PI*2);
context.fillStyle="#000";
context.fill();
context.closePath();
context.beginPath();
context.arc(200,300,40,0,Math.PI*2);
context.fillStyle="yellow";
context.fill();
context.closePath();
}
</script>
</body>
</html>
扫一扫
830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
