HTML5 Canvas详解与实践-CSDN博客

本文链接：https://blog.csdn.net/c________j/article/details/44992895

本文详细探讨了HTML5的Canvas元素，包括canvas.width和canvas.height属性，用于设置画布大小；canvas.lineWidth用于设定线条宽度；canvas.strokeStyle指定线条颜色；还介绍了如何使用context.moveTo和context.lineTo绘制路径，结合context.fillStyle和context.fill()、context.stroke()填充和描边路径。通过这些基本操作，可以实现丰富的图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 canvas初始化

首先使用canvas标签,通过document.getElementById("2d")获取元素.canvas的初始化.

canvas.width
canvas.height
canvas.lineWidth
canvas.strokeStyle (字符串颜色)

if(canvas.getContext("2d"))

var context = canvas.getContext("2d")

使用context绘制,基于状态开始绘制.

2.1绘制直线与曲线

context.moveTo(x,y)
context.lineTo(x,y)
context.fillStyle (字符串颜色)
context.fill()
context.stroke()

绘制使用 context.beginPath() 开始使用 context.closePath() 结束. 来区分状态值.

绘制曲线 context.arc( centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false)

圆心坐标x,圆心坐标y,半径,开始角度,结束角度,是否逆时针绘制

结束在切点位置

3.1 绘制动画基础

使用canvas 绘制动画 setInterval()(
匿名函数 function(){
           render(); 绘制当前画面渲染
           update(); 调整数据结构修正
           },
时间 (毫秒)

);

context.clearRect(0,0,width,height); 对矩形空间内的图像进行刷新操作.

绘制矩形

context.rect(x,y,width,height)
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)

3.2 线条的属性

lineCap 设置线条两端的形状

butt(default)、round、square

lineJoin 相交的效果

miter(default) 尖角、bevel 斜接、round 圆角

miterLimit 当lineJoin设置为miter时,内角距离的最大值(线条的实线尖角和宽度线外的线外夹角) 超过的话将使用bevel 默认为10.

先填充,后描边.当设置一些线段属性后,先调用fill(),后调用stroke().

4.1 图像变换和状态保存

context.save() 保存canvas状态

context.restore() 恢复状态

在绘制图像时,往往是先绘制基本轮廓再加以变换.

translate(x,y) 位移

rotate(deg) 旋转

scale(sx,sy) 缩放

function drawStar(cxt,x,y,R,rot){

  cxt.save();

cxt.translate(x,y);

cxt.rotate(rot/180*Math.PI);

cxt.scale(R,R);



startPath(cxt);



cxt.fillStyle = "#fb3";

//     cxt.strokeStyle = "#fd5"; //当调用scale()时,缩放不仅仅是图形还包括边,所以就把描边相关的注释掉

//     cxt.lineWidth = 3;

//     cxt.lineJoin = "round";

cxt.fill();

//     cxt.stroke();

cxt.restore();

}

4.1.1 变换矩阵

[ a c e ] a,d 水平、垂直缩放

[ b d f ] b,c 水平、垂直倾斜

[ 0 0 1 ] e,f 水平、垂直位移

设置变换矩阵
transform(a,b,c,d,e,f) 可级联效果
setTransform(a,b,c,d,e,f) 可以使之前失效设置为此效果

5.1 填充样式

fillStyle 除颜色外还可以设置渐变色.

首先,创建一个渐变色,并将其设置关键色的属性.最后设置为fillStyle的值.

5.1.1 线性渐变:

var grd = context.createLinearGradient(xstart,ystart,xend,yend)

grd.addColorStop(stop,color) //关键色的位置,关键色

5.1.2 径向渐变:

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1) //定义两个圆

grd.addColorStop(stop,color)

5.1.3 背景填充:

createPattern(img,repeat-style) //repeat-style: no-repeat,repeat-x.repeat-y,repeat

图片填充:

var backgroundImage = new Image();

backgroundImage.arc = "b.jpg";

backgroundImage.onload = function(){

var pattern = context.createPattern(backgroundImage,"repeat");

context.fillStyle = pattern;

}

当然,还可以使用canvas画布来填充:

var backgCanvas = createBackgroundCanvas();

var pattern = context.createPattern(backgroundVanvas,'repeat');

还可以使用video.

6.1 曲线的绘制

圆弧和圆角矩形

cxt.arc(

centerx,centery,radius,startingAngle,endingAngle,anticlockwise = false

)

圆心坐标x,圆心坐标y,半径,开始角度,结束角度,是否逆时针绘制.

绘制圆角矩形:

function drawRoundRect(cxt,x,y,width,height,radius){

     cxt.save();

     cxt.translate(x,y);

     pathRoundRect(cxt,width,height,radius);

     cxt.strokeStyle = "black";

     cxt.stroke();

     cxt.restore();

}

function pathRoundRect (cxt,width,height,radius){

     cxt.beginPath();



     cxt.arc(width - radius, height - radius,radius, 0 , Math.PI/2);

     cxt.lineTo(radius,height);

     cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);

     cxt.lineTo(0,radius);

     cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);

     cxt.lineTo(width-radius,0);

     cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);



     cxt.closePath();

}

6.2 圆弧
另一种绘制曲线的方法:

cxt.arcTo(
x1,y1,x2,y2,radius
)

     圆1坐标x,圆1坐标y(控制点),圆2坐标x,圆2坐标y(结束点),半径
     结束在切点位置

6.3 二次贝赛尔曲线    Bezier

quadraticCurveTo()

context.moveTo(x0,y0);

context.quadraticCurveTo(

x1,y1,

x2,y2) ;

实例: http://tinyurl.com/html5quadratic

6.4 三次贝赛尔曲线

bezierCurveTo()

context.moveTo(x0,y0);

context.quadraticCurveTo(

     x1,y1,

     x2,y2,

     x3,y3 );

实例: http://tinyurl.com/html5bezier

7-1 文字渲染

context.font = "bolid 40px Arial" 设置字体
context.fillText(String,x,y,[maxlen]) 书写字符串

字型字号和字体
font 默认值:"20px sans-serif"
context.font =

     font-style : normal(default) italic(斜体字) oblique(倾斜字体)

     font-variant : normal(default) small-caps (小型大写字母)

     font-weight : lighter normal(default)(400) bold(700) bolder

     font-size : 20px(default) 2em 150% ox-small x-small medium ..

     font-family : 设置多种字体备选支持@font-face Web安全字体

文本对齐
context.textAlign = left center right (基准是要给定文本初始坐标值)
context.textBaseline = top middle bottom (坐标点) alphabetic(default) (英文) ideographic (方块字) hanging (印度语)

文本度量
context.measureText(String).width 渲染后的字符串宽度便于制作文本编辑器要先设置文本属性

8-1 阴影
     context.shadowColor          阴影颜色(包括半透明)
     context.shadowOffsetX 阴影位移值
     context.shadowOffsetY
     context.shadowBlur          阴影模糊程度(越大越模糊)

      设置一个属性,便会出现阴影
8-2 global
     globalAlpha = 1(default)     模糊即将绘制系统的透明度
     globalCompositeOperation = "source-over"(default)     如果两个图形互相压制 (前面在后面上面)
          source-over source-atop source-in source-out
          destination-over destination-atop destination-in destination-out
          lighter copy xor

8-3 剪辑区域
     context.clip()     绘制环境的改变

Canvas标签学习总结