HTML5 canvas画布
canvas是什么 H5里面的一个标签,作为一个标签,他就像是一幅画布,等待着你来作画。可以说,他只是一个容器而已,需要配合着JavaScript来进行绘制。
创建canvas元素 创建了一个canvas元素,并规定了元素的id,宽度和高度。
注意: 创建标签,画布的大小在标签上设置,如果在css设置,设置的是这个标签的大小,而不是画布的大小。
通过 JavaScript 来绘制 canvas元素本身没有绘图能力,所有的绘制工作必须在javascript内部完成:
画个矩形:
理解坐标 上面的fillRect方法拥有参数(10,10,100,100);
意思是:在画布上从左上角开始 (10,10),绘制一个 100x100 的矩形。
getContext()
getContext() 方法返回一个用于在画布上绘图的环境。
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”,它指定了二维绘图,并且导致这个方法返回一个环境对象,该对象导出一个二维绘图 API。
画个三角形
得到一下图形
文章图片
然后闭合图形
画个圆形
文章图片
arc() 方法创建弧/曲线(用于创建圆或部分圆)
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。
eAngle 结束角,以弧度计。
counterclockwise 规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
渐变
文章图片
context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
插入图片
【HTML|H5 canvas 基础一】
文章图片
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)
基础的就到这里了,以后再慢慢写。
推荐阅读
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结(第十六天,电商项目完)
- canvas|【html5画布——使用canvas绘制圆形和弧形】
- 前端|JS基本功修炼,一文搞懂JavaScript数组
- 前端|npm ERR command failednpm ERR command CWINDOWSsystem32cmd.exe d s c node-gyp rebuild
- 前端|8.Django怎样去调用漂亮的HTML前端页面()
- 前端|vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
- 前端|实习生 Git 不熟练,还没脸去问是种什么体验
- 小小的项目|【HTML——简易 飞机大战 小游戏(效果+代码)】
- html|【HTML——3d粒子特效(效果+代码)】