本文主要和大家介绍html5 canvas绘图基本使用方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b是html5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个canvasrenderingcontext2d对象，我们可以通过javascript脚本来控制该对象进行绘图。
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在5ba626b379994d53f7acf72a64f9b697>元素上绘图主要有三步：
获取5ba626b379994d53f7acf72a64f9b697元素对应的dom对象，这是一个canvas对象；
调用canvas对象的getcontext()方法，得到一个canvasrenderingcontext2d对象；
调用canvasrenderingcontext2d对象进行绘图。
绘制线段moveto()和lineto()
以下是一个简单的5ba626b379994d53f7acf72a64f9b697绘图示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas绘图演示</title>
<style type="text/css">
#canvas{
border: 1px solid #adacb0;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300">
你的浏览器还不支持canvas
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//设置对象起始点和终点
context.moveto(10,10);
context.lineto(200,200);
//设置样式
context.linewidth = 2;
context.strokestyle = "#f5270b";
//绘制
context.stroke();
</script>
</html>
如果没有通过moveto()特别指定，lineto()的起始点是以上一个点为准。因此，如果需要重新选择起始点，则需要通过moveto()方法。如果需要对不同的线段设置样式，则需要通过context.beginpath()重新开启一条路径，下面是一个示例：
<script type="text/javascript">
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//设置对象起始点和终点
context.beginpath();
context.moveto(100,100);
context.lineto(700,100);
context.lineto(700,400);
context.linewidth = 2;
context.strokestyle = "#f5270b";
//绘制
context.stroke();
context.beginpath();
context.moveto(100,200);//这里的moveto换成lineto效果是一样的
context.lineto(600,200);
context.lineto(600,400);
//strokestyle的颜色有新的值，则覆盖上面设置的值
//linewidth没有新的值，则按上面设置的值显示
context.strokestyle = "#0d25f6";
//绘制
context.stroke();
</script>
绘制矩形rect()、fillrect()和strokerect()
context.rect( x , y , width , height )：只定义矩形的路径；
context.fillrect( x , y , width , height )：直接绘制出填充的矩形；
context.strokerect( x , y , width , height )：直接绘制出矩形边框；
<script type="text/javascript">
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//使用rect方法
context.rect(10,10,190,190);
context.linewidth = 2;
context.fillstyle = "#3ee4cb";
context.strokestyle = "#f5270b";
context.fill();
context.stroke();
//使用fillrect方法
context.fillstyle = "#1424de";
context.fillrect(210,10,190,190);
//使用strokerect方法
context.strokestyle = "#f5270b";
context.strokerect(410,10,190,190);
//同时使用strokerect方法和fillrect方法
context.fillstyle = "#1424de";
context.strokestyle = "#f5270b";
context.strokerect(610,10,190,190);
context.fillrect(610,10,190,190);
</script>
这里需要说明两点：第一点就是stroke()和fill()绘制的前后顺序，如果fill()后面绘制，那么当stroke边框较大时，会明显的把stroke()绘制出的边框遮住一半；第二点：设置fillstyle或strokestyle属性时，可以通过“rgba(255,0,0,0.2)”的设置方式来设置，这个设置的最后一个参数是透明度。
另外还有一个跟矩形绘制有关的：清除矩形区域：context.clearrect(x,y,width,height)。
接收参数分别为：清除矩形的起始位置以及矩形的宽和长。
在上面的代码中绘制图形的最后加上：
context.clearrect(100,60,600,100);
可以得到以下效果：
绘制五角星
通过对五角星分析，我们可以确定各个顶点坐标的规律，这里需要注意的一点是：在canvas中，y轴的方向是向下的。
相应代码如下：
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.beginpath();
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineto(math.cos((18+i*72)/180*math.pi)*200+200,
-math.sin((18+i*72)/180*math.pi)*200+200);
context.lineto(math.cos((54+i*72)/180*math.pi)*80+200,
-math.sin((54+i*72)/180*math.pi)*80+200);
}
context.closepath();
//设置边框样式以及填充颜色
context.linewidth="3";
context.fillstyle = "#f6f152";
context.strokestyle = "#f5270b";
context.fill();
context.stroke();
最后效果：
线条属性
除了上面用到的linewidth属性，线条还有以下几个属性：
linecap 属性设置或返回线条末端线帽的样式，可以取以下几个值：
“butt” 向线条的每个末端添加平直的边缘（默认）；
“round” 向线条的每个末端添加圆形线帽；
“square” 向线条的每个末端添加正方形线帽。
linejoin 属性当两条线交汇时设置或返回所创建边角的类型，可以取以下几个值：
“miter” 创建尖角(默认)；
“bevel” 创建斜角；
“round” 创建圆角。
miterlimit 属性设置或返回最大斜接长度（默认为10）。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 linejoin 属性为 “miter” 时，miterlimit 才有效。
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//测试linecap属性
//设置基准线便于观察
context.moveto(10,10);
context.lineto(10,200);
context.moveto(200,10);
context.lineto(200,200);
context.linewidth="1";
context.stroke();
//butt
context.beginpath();
context.moveto(10,50);
context.lineto(200,50);
context.linecap="butt";
context.linewidth="10";
context.stroke();
//round
context.beginpath();
context.moveto(10,100);
context.lineto(200,100);
context.linecap="round";
context.linewidth="10";
context.stroke();
//square
context.beginpath();
context.moveto(10,150);
context.lineto(200,150);
context.linecap="square";
context.linewidth="10";
context.stroke();
//测试linjoin属性
//miter
context.beginpath();
context.moveto(300,50);
context.lineto(450,100);
context.lineto(300,150);
context.linejoin="miter";
context.linewidth="10";
context.stroke();
//round
context.beginpath();
context.moveto(400,50);
context.lineto(550,100);
context.lineto(400,150);
context.linejoin="round";
context.linewidth="10";
context.stroke();
//square
context.beginpath();
context.moveto(500,50);
context.lineto(650,100);
context.lineto(500,150);
context.linejoin="bevel";
context.linewidth="10";
context.stroke();
//测试miterlimit属性
context.beginpath();
context.moveto(700,50);
context.lineto(850,100);
context.lineto(700,150);
context.linejoin="miter";
context.miterlimit="2";
context.linewidth="10";
context.strokestyle="#2913ec";
context.stroke();
各属性的不同取值的效果如下：
填充样式
前面用到的fillstyle和strokestyle除了设置颜色外，还能设置其他填充样式，这里以fillstyle为例：
线性渐变
使用步骤
（1）var grd = context.createlineargradient( xstart , ystart, xend , yend )创建一个线性渐变，设置起始坐标和终点坐标；
（2）grd.addcolorstop( stop , color )为线性渐变添加颜色，stop为0~1的值；
（3）context.fillstyle=grd将赋值给context。
径向渐变
该方法与线性渐变使用方法类似，只是第一步接收的参数不一样
var grd = context.createradialgradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。
位图填充
createpattern( img , repeat-style )使用图片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//线性渐变
var grd = context.createlineargradient( 10 , 10, 100 , 350 );
grd.addcolorstop(0,"#1ef9f7");
grd.addcolorstop(0.25,"#fc0f31");
grd.addcolorstop(0.5,"#ecf811");
grd.addcolorstop(0.75,"#2f0af1");
grd.addcolorstop(1,"#160303");
context.fillstyle = grd;
context.fillrect(10,10,100,350);
//径向渐变
var grd = context.createradialgradient(325 , 200, 0 , 325 , 200 , 200 );
grd.addcolorstop(0,"#1ef9f7");
grd.addcolorstop(0.25,"#fc0f31");
grd.addcolorstop(0.5,"#ecf811");
grd.addcolorstop(0.75,"#2f0af1");
grd.addcolorstop(1,"#160303");
context.fillstyle = grd;
context.fillrect(150,10,350,350);
//位图填充
var bgimg = new image();
bgimg.src = "background.jpg";
bgimg.onload=function(){
var pattern = context.createpattern(bgimg, "repeat");
context.fillstyle = pattern;
context.strokestyle="#f20b0b";
context.fillrect(600, 100, 200,200);
context.strokerect(600, 100, 200,200);
};
效果如下：
图形变换
平移：context.translate(x,y)，接收参数分别为原点在x轴方向平移x，在y轴方向平移y。
缩放：context.scale(x,y)，接收参数分别为x坐标轴按x比例缩放，y坐标轴按y比例缩放。
旋转：context.rotate(angle)，接收参数是坐标轴旋转的角度。
需要说明的是，对图形进行变化后，接下来的一次绘图是紧接着上一次的状态的，所以如果需要回到初始状态，要用到context.save();和context.restore();来保存和恢复当前状态:
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
//translate()
context.save();
context.fillstyle = "#1424de";
context.translate(10,10);
context.fillrect(0,0,200,200);
context.restore();
//scale()
context.save();
context.fillstyle = "#f5270b";
context.scale(0.5,0.5);
context.fillrect(500,50,200,200);
context.restore();
//rotate()
context.save();
context.fillstyle = "#18eb0f";
context.rotate(math.pi / 4);
context.fillrect(300,10,200,200);
context.restore();
效果如下：
另外一个跟图形变换相关的是：矩阵变换 ：context.transform(a, b, c, d, e, f, g)。参数的含义如下：
a 水平缩放 ( 默认为1 )
b 水平倾斜 ( 默认为 0 )
c 垂直倾斜 ( 默认为 0 )
d 垂直缩放 ( 默认为1 )
e 水平位移 ( 默认为 0 )
f 垂直位移 ( 默认为 0 )
读者可以自行验证其各个参数的效果，这里就不一一介绍了。
绘制曲线
跟绘制曲线的有四个函数，分别是：
context.arc(x,y,r,sangle,eangle,counterclockwise);用于创建弧/曲线（用于创建圆或部分圆）。接收的参数含义：
| 参数 | 含义 |
| :————- |:————-|
| x | 圆的中心的 x 坐标 |
|y|圆的中心的 y 坐标|
|r|圆的半径|
|sangle|起始角，以弧度计（弧的圆形的三点钟位置是 0 度）|
|eangle|结束角，以弧度计|
|counterclockwise|可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针|
下面是几个arc()函数的几个示例：
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.strokestyle = "#f22d0d";
context.linewidth = "2";
//绘制圆
context.beginpath();
context.arc(100,100,40,0,2*math.pi);
context.stroke();
//绘制半圆
context.beginpath();
context.arc(200,100,40,0,math.pi);
context.stroke();
//绘制半圆,逆时针
context.beginpath();
context.arc(300,100,40,0,math.pi,true);
context.stroke();
//绘制封闭半圆
context.beginpath();
context.arc(400,100,40,0,math.pi);
context.closepath();
context.stroke();
效果如下：
context.arcto(x1,y1,x2,y2,r); 在画布上创建介于两个切线之间的弧/曲线。接收的参数含义：
参数含义
x1 弧的控制点的 x 坐标
y1 弧的控制点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
这里需要注意的是arcto函数绘制的曲线的起始点需要通过moveto(）函数来设置，下面利用arcto函数绘制一个圆角矩形：
function createroundrect(context , x1 , y1 , width , height , radius)
{
// 移动到左上角
context.moveto(x1 + radius , y1);
// 添加一条连接到右上角的线段
context.lineto(x1 + width - radius, y1);
// 添加一段圆弧
context.arcto(x1 + width , y1, x1 + width, y1 + radius, radius);
// 添加一条连接到右下角的线段
context.lineto(x1 + width, y1 + height - radius);
// 添加一段圆弧
context.arcto(x1 + width, y1 + height , x1 + width - radius, y1 + height , radius);
// 添加一条连接到左下角的线段
context.lineto(x1 + radius, y1 + height);
// 添加一段圆弧
context.arcto(x1, y1 + height , x1 , y1 + height - radius , radius);
// 添加一条连接到左上角的线段
context.lineto(x1 , y1 + radius);
// 添加一段圆弧
context.arcto(x1 , y1 , x1 + radius , y1 , radius);
context.closepath();
}
// 获取canvas元素对应的dom对象
var canvas = document.getelementbyid('mc');
// 获取在canvas上绘图的canvasrenderingcontext2d对象
var context = canvas.getcontext('2d');
context.linewidth = 3;
context.strokestyle = "#f9230b";
createroundrect(context , 30 , 30 , 400 , 200 , 50);
context.stroke();
效果如下：
context.quadraticcurveto(cpx,cpy,x,y);绘制二次贝塞曲线，参数含义如下：
参数含义
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginpath() 和 moveto() 方法来定义开始点。
context.beziercurveto(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线，参数如下：
参数含义
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
文字渲染
与文本渲染有关的主要有三个属性以及三个方法：
属性描述
font 设置或返回文本内容的当前字体属性
textalign 设置或返回文本内容的当前对齐方式
textbaseline 设置或返回在绘制文本时使用的当前文本基线
方法描述
filltext() 在画布上绘制”被填充的”文本
stroketext() 在画布上绘制文本（无填充）
measuretext() 返回包含指定文本宽度的对象
上述的属性和方法的基本用法如下：
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.font="bold 30px arial"; //设置样式
context.strokestyle = "#1712f4";
context.stroketext("欢迎来到我的博客！",30,100);
context.font="bold 50px arial";
var grd = context.createlineargradient( 30 , 200, 400 , 300 );//设置渐变填充样式
grd.addcolorstop(0,"#1ef9f7");
grd.addcolorstop(0.25,"#fc0f31");
grd.addcolorstop(0.5,"#ecf811");
grd.addcolorstop(0.75,"#2f0af1");
grd.addcolorstop(1,"#160303");
context.fillstyle = grd;
context.filltext("欢迎来到我的博客！",30,200);
context.save();
context.moveto(200,280);
context.lineto(200,420);
context.stroke();
context.font="bold 20px arial";
context.fillstyle = "#f80707";
context.textalign="left";
context.filltext("文本在指定的位置开始",200,300);
context.textalign="center";
context.filltext("文本的中心被放置在指定的位置",200,350);
context.textalign="right";
context.filltext("文本在指定的位置结束",200,400);
context.restore();
context.save();
context.moveto(10,500);
context.lineto(500,500);
context.stroke();
context.fillstyle="#f60d0d";
context.font="bold 20px arial";
context.textbaseline="top";
context.filltext("指定位置在上面",10,500);
context.textbaseline="bottom";
context.filltext("指定位置在下面",150,500);
context.textbaseline="middle";
context.filltext("指定位置居中",300,500);
context.restore();
context.font="bold 40px arial";
context.strokestyle = "#16f643";
var text = "欢迎来到我的博客！";
context.stroketext("欢迎来到我的博客！",10,600);
context.stroketext("上面字符串的宽度为："+context.measuretext(text).width,10,650);
效果如下：
其他属性和方法
阴影绘制：
shadowcolor 设置或返回用于阴影的颜色。
shadowblur 设置或返回用于阴影的模糊级别（数值越大越模糊）。
shadowoffsetx 设置或返回阴影与形状的水平距离。
shadowoffsety 设置或返回阴影与形状的垂直距离。
我们为之前绘制的五角星添加一下阴影
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.beginpath();
//设置是个顶点的坐标，根据顶点制定路径
for (var i = 0; i < 5; i++) {
context.lineto(math.cos((18+i*72)/180*math.pi)*200+200,
-math.sin((18+i*72)/180*math.pi)*200+200);
context.lineto(math.cos((54+i*72)/180*math.pi)*80+200,
-math.sin((54+i*72)/180*math.pi)*80+200);
}
context.closepath();
//设置边框样式以及填充颜色
context.linewidth="3";
context.fillstyle = "#f6f152";
context.strokestyle = "#f5270b";
context.shadowcolor = "#f7f2b4";
context.shadowoffsetx = 30;
context.shadowoffsety = 30;
context.shadowblur = 2;
context.fill();
context.stroke();
效果如下：
图形组合：
globalalpha： 设置或返回绘图的当前 alpha 或透明值
该方法主要是设置图形的透明度，这里就不具体介绍。
globalcompositeoperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：
值描述
source-over 在目标图像上显示源图像（默认）
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的
source-out 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的
destination-over 在源图像上显示目标图像
destination-atop 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的
destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的
lighter 显示源图像 + 目标图像
copy 显示源图像。忽略目标图像
xor 使用异或操作对源图像与目标图像进行组合
下面是一个小示例，可以通过点击改变组合效果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图形组合</title>
<style type="text/css">
#canvas{
border: 1px solid #1c0efa;
display: block;
margin: 20px auto;
}
#buttons{
width: 1000px;
margin: 5px auto;
clear:both;
}
#buttons a{
font-size: 18px;
display: block;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="800">
你的浏览器还不支持canvas
</canvas>
<p id="buttons">
<a href="#">source-over</a>
<a href="#">source-atop</a>
<a href="#">source-in</a>
<a href="#">source-out</a>
<a href="#">destination-over</a>
<a href="#">destination-atop</a>
<a href="#">destination-in</a>
<a href="#">destination-out</a>
<a href="#">lighter</a>
<a href="#">copy</a>
<a href="#">xor</a>
</p>
</body>
<script type="text/javascript">
window.onload = function(){
draw("source-over");
var buttons = document.getelementbyid("buttons").getelementsbytagname("a");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(){
draw(this.text);
return false;
};
}
};
function draw(compositestyle){
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.clearrect(0, 0, canvas.width, canvas.height);
//draw title
context.font = "bold 40px arial";
context.textalign = "center";
context.textbasedline = "middle";
context.fillstyle = "#150e0e";
context.filltext("globalcompositeoperation = "+compositestyle, canvas.width/2, 60);
//draw a rect
context.fillstyle = "#f6082a";
context.fillrect(300, 150, 500, 500);
//draw a triangle
context.globalcompositeoperation = compositestyle;
context.fillstyle = "#1611f5";
context.beginpath();
context.moveto(700, 250);
context.lineto(1000,750);
context.lineto(400, 750);
context.closepath();
context.fill();
}
</script>
</html>
读者可以点击标签来观察不同的组合效果，效果如下：
剪辑区域：
clip()方法从原始画布中剪切任意形状和尺寸。
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）
以下是用一个圆去截取一个矩形的示例：
var canvas = document.getelementbyid("canvas");
var context = canvas.getcontext("2d");
context.beginpath();
context.fillstyle = "#0c0101";
context.fillrect(0,0,canvas.width,canvas.height);
context.beginpath();
context.fillstyle = "#fffdfd";
context.arc(400,400,100,0,2*math.pi);
context.fill();
context.clip();
context.beginpath();
context.fillstyle = "#f60825";
context.fillrect(200, 350, 400,50);
除了上述的属性的和方法，还有以下等方法：
drawimage()： 向画布上绘制图像、画布或视频。
todataurl() ：保存图形
ispointinpath()： 如果指定的点位于当前路径中，则返回 true，否则返回 false。
这里就不逐个举例说明了。
相关推荐：
炫丽的倒计时效果canvas绘图与动画视频的资源推荐
html5 canvas绘图使用详解
canvas多边形的画法示例
以上就是html5 canvas绘图基本详解的详细内容。