一、基本用法

在网页上绘制图像画布是一个矩形区域通过控制其每一像素绘制路径、矩形、圆形、字符以及添加图像。

创建一个canvaswidth

height

document.getElementById(myCanvas);

context

绘制矩形前2个参数为在canvas里面的矩形左上角起点坐标第3个参数是宽第4个参数是高

填充颜色

属性描述fillStyle设置或返回用于填充绘图的颜色、渐变或图案。

strokeStyle设置或返回用于笔划的颜色、渐变或图案。

shadowColor设置或返回用于阴影的颜色。

shadowBlur设置或返回阴影的模糊级别。

shadowOffsetX设置或返回阴影到形状的水平距离。

shadowOffsetY设置或返回阴影到形状的垂直距离。

context

方法描述fill()填充当前图形路径。

stroke()实际上绘制您定义的路径。

beginPath()开始路径或重置当前路径。

closePath()创建从当前点返回起点的路径。

2.1、绘制线条

方法描述绘制moveTo()划线起始点否lineTo()画线到另一个点否

canvas

document.getElementById(myCanvas);

context

属性描述值lineWidth绘制时要使用的线条宽度像素lineCap定义线的端部样式round圆形

square方形、butt平直默认值lineJoin设置或返回两条线相交时创建的角的类型bevel斜角、round圆角

miter尖角默认值

坐标。

width矩形的宽度以像素为单位。

height矩形的高度以像素为单位。

const

document.getElementById(myCanvas);

const

参数描述x圆心的x轴坐标y圆心的y轴坐标r圆弧的半径start圆弧的起始点end圆弧的终点

canvas

document.getElementById(myCanvas);

context

绘制圆弧路径的方法圆心的x轴坐标圆心的y轴坐标圆弧的半径圆弧的起始点圆弧的终点true逆时针绘制圆弧false顺时针绘制

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

fillText(text,x,y)在画布上绘制“填充的”文本

const

document.getElementById(myCanvas);

const

50);strokeText(text,x,y)在画布上绘制文本无填充

const

document.getElementById(myCanvas);

const

属性描述font设置或返回文本内容的当前字体属性。

textAlign设置或返回文本内容的当前对齐方式。

textBaseline设置或返回绘制文本时使用的当前文本基线。

font

值描述start默认。

文本在指定的位置开始。

end文本在指定的位置结束。

center文本的中心被放置在指定的位置。

left文本左对齐。

right文本右对齐。

textBaseline

值描述alphabetic默认。

文本基线是普通的字母基线。

top文本基线是

方框的顶端。

hanging文本基线是悬挂基线。

middle文本基线是

方框的正中。

ideographic文本基线是表意基线。

bottom文本基线是

2.5、填充图像

document.getElementById(myCanvas);

context

document.getElementById(scream);

放置图片

图片image的左上角在目标画布上X轴坐标image的左上角在目标画布上Y轴坐标

ctx.drawImage(img,