1）用路径绘图：
beginpath()——开始一条新路径；
closepath()——尝试闭合现有路径，方法是绘制一条线，连接最后那条线的终点与初始坐标；
fill()——填充用子路径描述的图形；
ispointinpath(x,y)——如果指定的点在当前路径所描述的图形之内则返回true；
lineto(x,y)——绘制一条到指定坐标的子路径；
moveto(x,y)——移动到指定坐标而不绘制子路径；
rect(x,y,w,h)——绘制一个矩形，其左上角位于（x,y），宽度是w，高度是h;
stroke()——给子路径描述的图形绘制轮廓线；
<style type="text/css">
canvas{
border:thin solid black;
margin: 4px;
}
body > *{
float: left;
}
</style>
<canvas id="canvas1" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//由直线创建路径
var ctx=document.getelementbyid("canvas1").getcontext("2d");
ctx.fillstyle="#136455";
ctx.strokestyle="blue";
ctx.linewidth=4;
ctx.beginpath();
ctx.moveto(10,10);
ctx.lineto(110,10);
ctx.lineto(110,120);
ctx.closepath();
ctx.fill();
ctx.beginpath();
ctx.moveto(150,10);
ctx.lineto(200,10);
ctx.lineto(200,120);
ctx.lineto(190,120);
ctx.fill();
ctx.stroke();
ctx.beginpath();
ctx.moveto(250,10);
ctx.lineto(250,120);
ctx.stroke();
</script>
linecap——在绘制线条或闭合图形时设置线条末端的样式；
<canvas id="canvas2" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//设置linecap属性
var ctx2=document.getelementbyid("canvas2").getcontext("2d");
ctx2.strokestyle="red";
ctx2.linewidth=2;
ctx2.beginpath();
ctx2.moveto(0,50);
ctx2.lineto(200,50);
ctx2.stroke();
ctx2.strokestyle="black";
ctx2.linewidth=40;
var xpos=50;
var styles=["butt","round","square"];
for(var i=0;i<styles.length;i++){
ctx2.beginpath();
ctx2.linecap=styles[i];
ctx2.moveto(xpos,50);
ctx2.lineto(xpos,150);
ctx2.stroke();
xpos+=50;
}
</script>
<canvas id="canvas3" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//用rect方法绘制矩形
var ctx3=document.getelementbyid("canvas3").getcontext("2d");
ctx3.fillstyle="yellow";
ctx3.strokestyle="black";
ctx3.linewidth=4;
ctx3.beginpath();
ctx3.moveto(110,10);
ctx3.lineto(110,100);
ctx3.lineto(10,10);
ctx3.closepath();
ctx3.rect(110,10,100,90);
ctx3.rect(110,100,130,30);
ctx3.fill();
ctx3.stroke();
</script>
2）绘制圆弧：
arc(x,y,rad,startangle,endangle,direction)——绘制一段圆弧到（x,y）,半径为rad,起始角度为 startangle，结束角度为endangle。可选参数direction指定了圆弧的方向;
arcto(x1,y1,x2,y2,rad)——绘制一段半径为rad,经过（x1,y1）,直到（x2,y2）的圆弧；
<canvas id="canvas4" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//使用arcto方法
var ctx4=document.getelementbyid("canvas4").getcontext("2d");
var point1=[100,10];
var point2=[200,10];
var point3=[200,110];
ctx4.fillstyle="yellow";
ctx4.strokestyle="black";
ctx4.linewidth=4;
ctx4.beginpath();
ctx4.moveto(point1[0],point1[1]);
ctx4.arcto(point2[0],point2[1],point3[0],point3[1],100);
ctx4.stroke();
drawpoint(point1[0],point1[1]);
drawpoint(point2[0],point2[1]);
drawpoint(point3[0],point3[1]);
ctx4.beginpath();
ctx4.moveto(point1[0],point1[1]);
ctx4.lineto(point2[0],point2[1]);
ctx4.lineto(point3[0],point3[1]);
ctx4.stroke();
function drawpoint(x,y){
ctx4.linewidth=1;
ctx4.strokestyle="red";
ctx4.strokerect(x-2,y-2,4,4);
}
</script>
<canvas id="canvas5" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//响应鼠标移动绘制圆弧
var canvaselem = document.getelementbyid("canvas5");
var ctx5 = canvaselem.getcontext("2d");
var point1 = [100, 10];
var point2 = [200, 10];
var point3 = [200, 110];
draw();
canvaselem.onmousemove = function (e) {
if (e.ctrlkey) {
point1 = [e.clientx, e.clienty];
} else if(e.shiftkey) {
point2 = [e.clientx, e.clienty];
} else {
point3 = [e.clientx, e.clienty];
}
ctx5.clearrect(0, 0, 540, 140);
draw();
}
function draw() {
ctx5.fillstyle = "yellow";
ctx5.strokestyle = "black";
ctx5.linewidth = 4;
ctx5.beginpath();
ctx5.moveto(point1[0], point1[1]);
ctx5.arcto(point2[0], point2[1], point3[0], point3[1], 50);
ctx5.stroke();
drawpoint(point1[0], point1[1]);
drawpoint(point2[0], point2[1]);
drawpoint(point3[0], point3[1]);
ctx5.beginpath();
ctx5.moveto(point1[0], point1[1]);
ctx5.lineto(point2[0], point2[1]);
ctx5.lineto(point3[0], point3[1]);
ctx5.stroke();
}
function drawpoint(x, y) {
ctx5.linewidth = 1;
ctx5.strokestyle = "red";
ctx5.strokerect(x -2, y-2, 4, 4);
}
</script>
<canvas id="canvas6" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//使用arc方法
var ctx6=document.getelementbyid("canvas6").getcontext("2d");
ctx6.fillstyle="yellow";
ctx6.linewidth=3;
ctx6.beginpath();
ctx6.arc(70,70,60,0,math.pi,true);
ctx6.stroke();
ctx6.beginpath();
ctx6.arc(200,70,60,math.pi/2,math.pi/4,false);
ctx6.fill();
ctx6.stroke();
ctx6.beginpath();
var val=0;
for(var i=0;i<4;i++){
ctx6.arc(350,70,60,val,val+math.pi/4,false);
val+=math.pi/2;
}
ctx6.closepath();
ctx6.fill();
ctx6.stroke();
</script>
3)绘制贝塞尔曲线
beziercurveto(cx1,cy1,cx2,cy2,x,y)——绘制一段贝塞尔曲线到点（x,y）,控制点为(cx1,cy1)和(cx2,cy2)；
quadraticcurveto(cx,xy,x,y)——绘制一段二次贝塞尔曲线到点（x,y）,控制点为（cx,cy）；
<canvas id="canvas" width="500" height="140">
your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var canvaselem = document.getelementbyid("canvas");
var ctx = canvaselem.getcontext("2d");
var startpoint = [50, 100];
var endpoint = [400, 100];
var cp1 = [250, 50];
var cp2 = [350, 50];
canvaselem.onmousemove = function(e) {
if (e.shiftkey) {
cp1 = [e.clientx, e.clienty];
} else if (e.ctrlkey) {
cp2 = [e.clientx, e.clienty];
}
ctx.clearrect(0, 0, 500, 140);
draw();
}
draw();
function draw() {
ctx.linewidth = 3;
ctx.strokestyle = "black";
ctx.beginpath();
ctx.moveto(startpoint[0], startpoint[1]);
ctx.beziercurveto(cp1[0], cp1[1], cp2[0], cp2[1],
endpoint[0], endpoint[1]);
ctx.stroke();
ctx.linewidth = 1;
ctx.strokestyle = "red";
var points = [startpoint, endpoint, cp1, cp2];
for (var i = 0; i < points.length; i++) {
drawpoint(points[i]);
}
drawline(startpoint, cp1);
drawline(endpoint, cp2);
}
function drawpoint(point) {
ctx.beginpath();
ctx.strokerect(point[0] -2, point[1] -2, 4, 4);
}
function drawline(from, to) {
ctx.beginpath();
ctx.moveto(from[0], from[1]);
ctx.lineto(to[0], to[1]);
ctx.stroke();
}
</script>
<canvas id="canvas" width="500" height="140">
your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
//绘制二次贝塞尔曲线
var canvaselem = document.getelementbyid("canvas");
var ctx = canvaselem.getcontext("2d");
var startpoint = [50, 100];
var endpoint = [400, 100];
var cp1 = [250, 50];
canvaselem.onmousemove = function(e) {
if (e.shiftkey) {
cp1 = [e.clientx, e.clienty];
}
ctx.clearrect(0, 0, 500, 140);
draw();
}
draw();
function draw() {
ctx.linewidth = 3;
ctx.strokestyle = "black";
ctx.beginpath();
ctx.moveto(startpoint[0], startpoint[1]);
ctx.quadraticcurveto(cp1[0], cp1[1], endpoint[0], endpoint[1]);
ctx.stroke();
ctx.linewidth = 1;
ctx.strokestyle = "red";
var points = [startpoint, endpoint, cp1];
for (var i = 0; i < points.length; i++) {
drawpoint(points[i]);
}
drawline(startpoint, cp1);
drawline(endpoint, cp1);
}
function drawpoint(point) {
ctx.beginpath();
ctx.strokerect(point[0] -2, point[1] -2, 4, 4);
}
function drawline(from, to) {
ctx.beginpath();
ctx.moveto(from[0], from[1]);
ctx.lineto(to[0], to[1]);
ctx.stroke();
}
</script>
4）创建剪辑区域
clip()——创建新的裁剪区域；
<canvas id="canvas7" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
var ctx7=document.getelementbyid("canvas7").getcontext("2d");
ctx7.fillstyle="yellow";
ctx7.beginpath();
ctx7.rect(0,0,500,140);
ctx7.fill();
ctx7.beginpath();
ctx7.rect(100,20,300,100);
ctx7.clip();
ctx7.fillstyle="red";
ctx7.beginpath();
ctx7.rect(0,0,500,140);
ctx7.fill();
</script>
5）绘制文本：
filltext(<text>,x,y,width)——在位置(x,y)上绘制并填充文本。宽度参数可选，用来设置文本宽度的上限；
stroketext(<text>,x,y,width)——在位置(x,y)上绘制并描边文本。宽度参数可选，用来设置文本宽度的上限；
font——设置绘制文本时使用的字体；
textalign——设置文本的对齐方式：start、end、left、right、center;
textbaseline——设置文本的基线：top、hanging、middle、alphabetic、ideographic、bottom；
6)使用特效和转换：
6.1)使用阴影：
shadowblur——设置阴影的模糊程度；
shadowcolor——设置阴影的颜色；
shadowoffsetx——设置阴影的水平偏移量；
shadowoffsety——设置阴影的垂直偏移量；
<canvas id="canvas8" width="500" height="140">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//给图形和文本应用阴影
var ctx8=document.getelementbyid("canvas8").getcontext("2d");
ctx8.fillstyle="lightgrey";
ctx8.strokestyle="black";
ctx8.linewidth=3;
ctx8.shadowoffsetx=5;
ctx8.shadowoffsety=5;
ctx8.shadowblur=5;
ctx8.shadowcolor="grey";
ctx8.beginpath();
ctx8.arc(420,70,50,0,math.pi,true);
ctx8.stroke();
ctx8.beginpath();
ctx8.arc(420,80,40,0,math.pi,false);
ctx8.fill();
ctx8.font="100px sans-serif";
ctx8.filltext("hello",50,100);
ctx8.stroketext("hello",50,100);
</script>
6.2）使用透明度：
globalalpha——给文本和图形设置透明度（从0到1）；
<canvas id="canvas9" width="300" height="120">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//使用globalalpha属性，设置透明度
var ctx9=document.getelementbyid("canvas9").getcontext("2d");
ctx9.fillstyle="lightgrey";
ctx9.strokestyle="black";
ctx9.linewidth=3;
ctx9.font="100px sans-serif";
ctx9.filltext("hello",10,100);
ctx9.stroketext("hello",10,100);
ctx9.fillstyle="red";
ctx9.globalalpha=0.5;
ctx9.fillrect(10,10,240,100);
</script>
6.3）使用合成：
globalcompositeoperation——与透明度属性结合使用，来控制图形和文本在画布上绘制的方式；
globalcompositeoperation允许的值：
=copy——将来源绘制于目标之上，忽略一切透明度设置；
=source-atop——在两个图像都不透明处显示来源图像，
目标图像不透明但来源图像透明处显示目标图像，其它位置显示为透明；
=source-in——来源图像和目标图像都不透明处显示来源图像。其它位置显示为透明；
=source-out——来源图像不透明但目标图像透明处显示来源图像。其它位置显示为透明；
=source-over——来源图像不透明处显示来源图像。其它位置显示目标图像；
=destination-atop——与source-atop相同，但用目标图像替代来源图像，反之亦然；
=destination-in——与source-in相同，但用目标图像替代来源图像，反之亦然；
=destination-over——与source-over相同，但用目标图像替代来源图像，反之亦然；
=destination-out——与source-out相同，但用目标图像替代来源图像，反之亦然；
=lighter——显示来源图像与目标图像的总和，颜色值限制最高255（100%）；
=xor——对来源图像和目标图像执行异或运算；
<canvas id="canvas10" width="300" height="120">
您的浏览器不支持<code>canvas</code>!
</canvas>
<label>comosition value:</label>
<select id="list">
<option>copy</option>
<option>destination-atop</option>
<option>destination-in</option>
<option>destination-over</option>
<option>destination-out</option>
<option>lighter</option>
<option>source-atop</option>
<option>source-in</option>
<option>source-out</option>
<option>source-over</option>
<option>xor</option>
</select>
<script>
//使用globalcompositeoperation属性
var ctx10=document.getelementbyid("canvas10").getcontext("2d");
ctx10.fillstyle="lightgrey";
ctx10.strokestyle="black";
ctx10.linewidth=3;
var compval="copy";
document.getelementbyid("list").onchange=function(e){
compval= e.target.value;
draw();
}
draw();
function draw(){
ctx10.clearrect(0,0,300,120);
ctx10.globalalpha=1.0;
ctx10.font="100px sans-serif";
ctx10.filltext("hello",10,100);
ctx10.stroketext("hello",10,100);
ctx10.globalcompositeoperation=compval;
ctx10.fillstyle="red";
ctx10.globalalpha=0.5;
ctx10.fillrect(100,10,150,100);
}
</script>
6.4）使用变换：
scale(<xscale>,<yscale>)——沿x轴缩放画布xscale倍，沿y轴yscale倍；
rotate(<angle>)——使画布围绕点(0,0)顺时针旋转指定的弧度数；
translate(<x>,<y>)——重映射画布坐标为沿x轴x,沿y轴y；
transform(a,b,c,d,e,f)——合并现有的变换和a-f值所指定的矩阵；
settansform(a,b,c,d,e,f)——用a-f值所指定的矩阵替换现有的变换；
<canvas id="canvas11" width="400" height="200">
您的浏览器不支持<code>canvas</code>!
</canvas>
<script>
//使用变换
var ctx11=document.getelementbyid("canvas11").getcontext("2d");
ctx11.fillstyle="lightgrey";
ctx11.strokestyle="black";
ctx11.linewidth=3;
ctx11.clearrect(0,0,300,120);
ctx11.globalalpha=1.0;
ctx11.font="100px sans-serif";
ctx11.filltext("hello",10,100);
ctx11.stroketext("hello",10,100);
ctx11.scale(1.3,1.3);
ctx11.translate(100,-50);
ctx11.rotate(0.5);
ctx11.fillstyle="red";
ctx11.globalalpha=0.5;
ctx11.fillrect(100,10,150,100);
ctx11.strokerect(0,0,300,200);
</script>
以上就是html5之canvas进阶的代码详解（图）的详细内容。