js游戏开发--1.canvas的使用

最新推荐文章于 2024-06-16 17:04:32 发布

fiona_0427

最新推荐文章于 2024-06-16 17:04:32 发布

阅读量287

点赞数

文章标签： html5 javascript 前端

本文链接：https://blog.csdn.net/fiona_0427/article/details/105725915

版权

一.创建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轴向下为正值，与我们数学中的直角坐标系是不同的

fiona_0427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js游戏开发--1.canvas的使用

一.创建canvas并认识canvas1.<canvas> 元素只是图形容器，但是图形要通过js绘制。canvas也叫画布。2.<canvas> 默认是一个白色的容器，默认宽300px,高150px。3. 可使用css设置canvas宽高背景边框等canvas {border: 1px solid red;width:250px;height:5...
复制链接

扫一扫