JavaScript学习笔记（canvas绘图）

最新推荐文章于 2024-11-19 12:16:10 发布

原创最新推荐文章于 2024-11-19 12:16:10 发布 · 583 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

javascript 专栏收录该内容

14 篇文章

订阅专栏

这篇笔记详细介绍了如何在HTML5 canvas上进行2D绘图，包括获取2D绘图上下文、图形样式设置、绘制矩形、路径、圆弧等，还涉及到文本的绘制和样式调整。同时强调了在不支持canvas的浏览器中的处理方式以及状态保存和回退的概念。

canvas绘图分为2d绘图和3d绘图(WebGL)，本篇主要梳理一下2d绘图相关的知识

1.canvas绘图依赖<canvas>标签作为画布

<canvas id="drawing" width=" 200" height="200">您的浏览器不支持canvas绘图功能</canvas>

可以在元素上添加widht,height属性，也可以通过css添加样式
如果浏览去不支持canvas标签，就会显示标签里面的内容

2.要在canvas画布上绘图，首先要取得2d绘图上下文对象，通过调用getContext()方法，传入2d

var drawing = document.getElementById('drawing');
if(drawing.getContext){
	var context = drawing.getContext('2d');
}

先判断元素上是否有getContext方法，确定浏览器是否支持canvas绘图，因为有的浏览器不支持canvas标签会用其他标签代替，不会报错，所以要通过getContext方法判断

3.canvas2d绘图,就有两种绘图方式，描边(画线)和填充

绘制图形样式设置

fillStyle 填充他图形颜色,支持css各种格式颜色值
strokeStyle 描边线条颜色，支持css各种格式颜色值
lineWidth 描边线条粗细，默认单位px
lineCap描边线条末端样式（butt平头round圆头square方头）
lineJoin描边线条连接处样式（round圆角bevel斜角平头miter直角斜接

绘制矩形
矩形是唯一可以直接绘制的图形（其他图形要先绘制路线，再绘制）

//绘制描边矩形
context.strokeStyle(color);
context.strokeRect(x,y,width,height);

//绘制填充矩形
context.fillStyle(color);
context.fillRect(x,y,width,height);

//剪切矩形区域
context.clearRect(x,y,width,height)

绘制路径

绘制前

绘制路径必须以beginPath()开头,表示要开始绘制

context.beginPath();

绘制中

绘制路径有以下用到的方法

moveTo(x, y)将绘制起点移动到x,y位置
lineTo(x，y)从上一个点绘制直线到x,y位置
closePath()闭合路径
arc(x, y, R, startAngle, endAngle, false)绘制圆弧
rect(x,y,width,height)绘制就行

绘制结束

绘制路径结束可以进行以下几个操作

stroke()对路径描边
fill()对路径填充
clip()对路径裁剪

//绘制圆
context.beginPath();
context.arc(110,200,50,0,2*Math.PI,false)
context.stroke();
//绘制矩形
context.beginPath();
context.rect(200,200,50,50)
context.stroke();

//绘制三角形
context.moveTo(10, 150);
context.lineTo(110,150);
context.lineTo(110,200);
context.closePath();

变换方法

translate(x,y) 把原点设置到x,y位置
rotate()旋转，传入弧度数
scale(x,y)缩放

无论变换还是设置其他属性，都会在上下文中一直有效，如果只想在绘制某个图形时使用一组属性，canvas提供了save()和restore()方法，用于保存状态和状态回退，支持保存多个状态和多层回退

绘制文本
设置文本样式

font(bold 10px Arial)设置文本格式
textAlign()设置文本对齐方式 start/center/end
textBaseline指定文本基线

绘制文本有两个方法

fillText(text,x,y)绘制填充文本
strokeText(text,x,y) 绘制描边文本

context.font = 'bold 20px Arial'//文本样式/大小/字体
context.align = 'center';//对齐方式
context.textBaseline = "middle";//文本基线
context.fillText("绘制的文本", 100, 300);
context.strokeText("绘制的文本", 200, 300);