一.创建canvas并认识canvas
0.canvas标签内部嵌套的任何元素都不会被浏览器识别。如果看到了,说明浏览器不能识别canvas
1.<canvas> 元素只是图形容器,但是图形要通过js绘制。canvas也叫画布。
2.<canvas> 默认是一个白色的容器,默认宽300px,高150px。
3. 可使用css设置canvas宽高背景边框等
canvas {
border: 1px solid red;
width:250px;
height:550px;
background:yellow;
}
4.canvas拥有属性width和高height,一般游戏开发中的宽高一般用属性设置而非css样式设置
<canvas id="mycanvas" width="200px", height="500px"></canvas>
5.css与属性设置canvas宽高的区别
(1)当css与属性都设置了canvas的宽高时,发现显示效果为css的宽高。
(2)canvas的属性width和height设置的宽高是canvas的真实大小,真实占用内存的大小,而
css的width和height设置的宽高是canvas属性设置的宽高进行压缩和拉伸,当拉伸时,占
用内存大小是不变的,所以图像会变得模糊
img标签的宽高通过属性设置和css设置同canvas
问:为何img,canvas有宽高,而div没有?
答:img,canvas里面有图片
显示效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
border: 1px solid red;
width:250px;
height:550px;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
</html>
6.使用js设置canvas的宽高属性,实际也是对属性进行更改
var mycanvas = document.getElementById("mycanvas");
mycanvas.width=300;
mycanvas.height=500;
7.设置canvas全屏.
思路:使用js设置canvas的属性值为屏幕的宽高
var mycanvas = document.getElementById("mycanvas");
mycanvas.width=document.documentElement.clientWidth;
mycanvas.height=document.documentElement.clientHeight;
8.画布是有坐标系的
canvas的2D环境绘图坐标系统,原点(0,0)位于canvas元素的左上角顶点处,沿x轴向右为正值,沿y轴向下为正值,与我们数学中的直角坐标系是不同的