【前端学习】H5 中canvas学习(上篇)

最新推荐文章于 2024-08-11 21:37:15 发布

严_同学

最新推荐文章于 2024-08-11 21:37:15 发布

阅读量290

点赞数

分类专栏： Html 文章标签：前端学习 javascript

本文链接：https://blog.youkuaiyun.com/shangshanling/article/details/124852490

版权

Html 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了HTML5中<canvas>元素的使用，重点讲解了getContext('2d')方法的作用，以及如何通过它获取二维绘图环境并实现图像绘制、缩放、填充和描边等操作。了解canvas的常见属性如宽度、高度和样式，以及关键方法如fillRect(), drawImage()和fillText()，以及toDataURL()的用法。

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

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

为什么使用getContext(“2d”)

getContext(contextId) 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
参数contextId 指定了您想要在画布上绘制的类型。当前唯一的合法值是"2d",它是指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。

提示:在未来，如果标签扩展到支持 3D 绘画，getContext() 方法可能允许传递一个"3d" 字符串参数。

用法

<canvas id="myCanvas"></canvas>

常用属性

属性	值	描述
width	pixels(像素)	宽度
height	pixels	高度
fillStyle	CSS 颜色值	设置或返回用于填充绘画的颜色、渐变或模式
font	CSS font 属性	设置或返回文本内容的当前字体属性

详细用法请参考：https://www.w3school.com.cn/tags/html_ref_canvas.asp

常用方法

方法	描述	例子
scale()	缩放当前绘图至更大或更小	context.scale(scalewidth,scaleheight);
fillRect()	绘制“被填充”的矩形	context.fillRect(x,y,width,height);
drawImage()	向画布上绘制图像、画布或视频	context.drawImage(img,x,y,width,height);
fillText()	在画布上绘制“被填充的”文本	context.fillText(text,x,y,maxWidth);
toDataURL()	用于将canvas对象转换为base64位编码	canvas.toDataURL(‘image/png’)