<canvas>是页面内一块rendering text, 是一块画布，可以在上面绘制图形。
1. 绘制一个基本矩形
<html>
<head>
<style>
canvas {
width: 100px;
height: 100px;
</style>
</head>
<body>
<canvas width="100px" height="100px"></canvas>
<script>
const canvas=document.getElementsByTagName('canvas')[0];
if(canvas.getContext){
var cx=canvas.getContext('2d');
cx.fillStyle="rgba(0,0,255,0.5)"
cx.fillRect(0,0,20,20);
}
</script>
</body>
<html>
rectangle
2. 如果css设置的尺寸和canvas冲突，canvas画布会拉伸
我们在css中定义canvas长宽如下：
canvas.style.width="200px";
canvas.style.height="300px";
原本html中定义的canvas的尺寸为(100,100)px, 画布中矩形的尺寸为(50,50)px, 现在页面呈现的矩形尺寸为(100,150)px。
3. 替代内容和浏览器支持问题
如果浏览器不支持canvas，会自动显示canvas tag内的替代内容；如果浏览器支持canvas, 就会忽略替代内容，正常显示canvas
<canvas>
//insert fallback content here, like texts or <img>
</canvas>
在js代码中，我们可以用getContext这个函数来检测浏览器是不是支持canvas.
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
网友评论