HTML5(五)——Canvas API

canvas 画布提供了一个画图的平面空间范围，每个点都有自己的坐标，原点位于画布的左上角，x表示横坐标，y表示纵坐标。

2.1 绘制路径

• ctx.beginPath - 开始绘制路径

• ctx.moveTo( x,y ) - 设置路径起点

• ctx.lineTo( x,y ) - 绘制一条线到(x,y)点

• ctx.closePath - 闭合图形

• ctx.stroke - 对路径进行着色

• ctx.fill - 对路径进行填充

eg：绘制一条线宽为5像素的红色线条，代码如下：

var canvas = document.getElementById(“mycanvas”);

var ctx = canvas.getContext(“2d”)

ctx.beginPath();

ctx.moveTo(0,0)

ctx.lineTo(400,400)

ctx.lineWidth = 5

ctx.strokeStyle = “red”

ctx.stroke()

eg：绘制一个绿色三角形，代码如下：

var canvas = document.getElementById(“mycanvas”);

var ctx = canvas.getContext(“2d”)

ctx.beginPath();

ctx.moveTo(0,0)

ctx.lineTo(400,400)

ctx.lineTo(0,400)

ctx.closePath()

ctx.lineWidth = 5

ctx.strokeStyle = “red”

ctx.stroke()

ctx.fillStyle = “green”

ctx.fill()

2.2 绘制矩形

• ctx.rect(x,y,width,height) - 绘制矩形路径

• ctx.strokeRect(x,y,width,height) - 绘制矩形

• ctx.fillRect(x,y,width,height) - 绘制填充矩形

• ctx.clearRect(x,y,width,height) - 清除矩形区域

上述绘制矩形的方法中均有四个参数，其中x,y表示矩形的左上角顶点，也算起点，width、height 为矩形的宽高。strokeRect 与 strokeStyle 配合使用，fillRect 与 fillStyle 配合使用。

eg：绘制一个带有红色边框的矩形，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

ctx.strokeStyle=“red”;

ctx.strokeRect(100,100,200,100)

上述 stroke 替换成fill便可绘制一个红色矩形。

2.3 绘制圆形 / 弧

• ctx.arc(x,y,radius,start,end,anticlockwise) - 绘制圆形或扇形

上述的参数中，x,y 表示圆心的坐标，radius 是半径，start 开始弧度，end 结束弧度，anticlockwise 表示是否是逆时针。

eg：绘制一个带有红色描边的黑色圆，代码如下：

2.4 绘制文本

• strokeText(string,x,y) - 绘制空心文字

• fillText(string,x,y) - 绘制实心文字

上述两个方法均带有三个参数，第一个 string 是需要绘制的内容，x,y 是文字的位置，需要注意的是 y 坐标是以文字的基线处开始算距离的，并非是文字顶部。文字的其他样式可通过 font 属性设置，与 css 的 font 类似。

eg：绘制实心的文字，并设置文字加粗、大小20像素是微软雅黑字体。代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

ctx.fillStyle=“red”;

ctx.font = “bold 40px 微软雅黑”

ctx.fillText(“我爱前端”,100,100)

注意：绘制文本的时候无法换行，如果需要换行的时候就需要多次绘制文字，达成换行目的。

2.5 设置渐变色

• createLinearGradient(x1,y1,x2,y2) - 设置渐变色

其中 x1,y1 表示起点，x2,y2 表示终点，通过不同坐标可控制渐变方向。

eg：给文字设置渐变色，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(‘2d’)

var grd = ctx.createLinearGradient(0,0,400,400)

grd.addColorStop(0,“#4dffff”)

grd.addColorStop(1,“#8e12aa”)

ctx.fillStyle=grd;

ctx.font = “bold 40px 微软雅黑”

ctx.fillText(“我爱前端”,100,100)

2.6 设置阴影

• shadowOffsetX - 设置水平位移

• shadowOffsetY - 设置垂直位移

• shadowBlur - 设置模糊度

• shadowColor - 阴影颜色

eg：制作一个带有阴影的矩形，代码如下：

var canvas = document.getElementById(“mycanvas”)

var ctx = canvas.getContext(“2d”)

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5

ctx.shadowBlur = 10;

ctx.shadowColor = “rgba(0,0,0,0.5)”

ctx.fillStyle=“red”

ctx.fillRect(0,0,200,100);

图片处理

====

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

[外链图片转存中…(img-ekDjWJcN-1719213843162)]

[外链图片转存中…(img-yFJ6RXbl-1719213843164)]