h5新增元素之canvas渲染问题

最新推荐文章于 2023-10-08 17:35:42 发布

Freya_yyy

最新推荐文章于 2023-10-08 17:35:42 发布

阅读量690

点赞数 1

分类专栏： HTML&CSS 文章标签： canvas标签

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Freya_yyy/article/details/98479549

版权

HTML&CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

笔试题中遇到canvas元素渲染的问题，平时不太使用canvas元素，有些疑惑，总结一二。

<canvas>是HTML5新增的，可以通过脚本（通常为javascript）在其中绘制图像的HTML元素。<canvas>元素本身没有绘制能力，它仅仅是一个图形容器，必须使用脚本来完成绘图任务，它就像我们画画的画布一样，需要人来用画笔完成画作。

1.canvas基本使用：

<canvas id="" width="" height=""></canvas>

<canvas>元素只有两个可选的属性width、height属性，如果不设置width、height属性，则默认为width为300、height为150，单位均为px。

也可以使用csss属性来设置canvas的宽和高，但是宽高的属性如果和初始比例不一致，则会出现扭曲。因此，建议永远不要使用css属性设置canvas的宽高。同样在内联样式中通过style属性设置canvas的宽高也会出现拉伸或是缩小，因此正确且保险的设置方式是使用canvas元素的width、height属性。

1.1支持性

由于某些浏览器不支持canvas元素，在这些浏览器上应该总是能展示替代内容。支持<canvas>的浏览器会只渲染<canvas> 标签，而忽略其中的替代内容。不支持<canvas>的浏览器则会直接渲染替代内容。可以使用文本或是图片进行替换：

<canvas id="" width="" height="">
    <img src="" alt="">
</canvas>

1.2 渲染上下文

<canvas>会创建一个固定大小的画布，会公开一个或多个渲染上下文，使用其绘制和处理要展示的内容。以2D渲染上下文为例：

var cav=document.getElementById("cav");
//获得2d上下文对象
var ctx=cav.getContext('2d');

2.笔试题目：

<canvas width="250" height="250"></canvas>有个矩形长20px，高10px,CSS中width：250px height：500px，请问这个矩形渲染出来的实际面积（）？

A.400 B.200 C.300 D.800

解析：画布大小和CSS中设置width：250px height：500px一致，其width和初始值比例为1:1，height和初始值比例为2:1。因此渲染出来的矩形的高度也将扩大一倍为20px，则矩形渲染出来的实际面积20X20=400。下图也可以下看出最终渲染出来的矩形是一个正方形。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
canvas {
	border: 1px solid black;
	width: 250px;
	height: 500px;
}
</style>
</head>
<body>
<canvas id="cav" width="250" height="250">浏览器不支持</canvas>
<script type="text/javascript">
window.addEventListener("load", () => {
    var can = document.getElementById('cav');
    var ctx = can.getContext("2d");
    ctx.fillStyle = "rgb(0,0,255)";
    ctx.fillRect(0, 0, 20, 10);
})
</script>
</body>
</html>

2.1如果给上述试题的canvas设置内联样式，会发现渲染矩形的结果和预期的不符：

<canvas id="cav" style="width: 250px;height: 250px;">浏览器不支持</canvas>

Freya_yyy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5新增元素之canvas渲染问题

笔试题中遇到canvas元素渲染的问题，平时不太使用canvas元素，有些疑惑，总结一二。<canvas>是HTML5新增的，可以通过脚本（通常为javascript）在其中绘制图像的HTML元素。<canvas>元素本身没有绘制能力，它仅仅是一个图形容器，必须使用脚本来完成绘图任务，它就像我们画画的画布一样，需要人来用画笔完成画作。1.canvas基本使用：...
复制链接

扫一扫