一.canvas的简介
一直以来,web上的动画都是flash实现的,例如,广告、游戏等。
flash是有缺点的,例如我们需要安装Adobe flash player插件,并且漏洞多、重量比较大、卡顿、不流畅等。
因此,HTML5推出了新的画布标签—canvas。
canvas是一个轻量级的画布,我们使用canvas进行JavaScript编程,不需要增加额外的插件,性能也很好,不卡顿,在手机中也很流畅。
canvas彻底颠覆了flash的主导地位。无论是广告、游戏,都可以用canvas实现。
canvas的本质:利用代码在浏览器上进行画画。
二.源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas的基本使用</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas width="500" height="400" id="myCanvas">
当前的浏览器版本不支持,请升级浏览器。
</canvas>
</body>
</html>
<script>
//获取画布
var canvas=document.getElementById("myCanvas");
console.log(canvas);
//获取2d画布的上下文,因此ctx变成了对象,拥有了属性和方法。
//所有的图形绘制都可以通过ctx的属性和方法来完成,因此canvas变成了辅助。
var ctx = canvas.getContext("2d");
console.log(ctx);
//设置颜色
ctx.fillStyle = 'green';
//绘制矩形
ctx.fillRect(50,90,200,100);
</script>
三.效果图
四.知识点总结
canvas有2个属性,分别是width、height,可以设置画布的宽度、高度。
注意事项:画布的宽和高不要用css样式去设置,如果使用css样式设置,画布就会失真、变形。
canvas标签里的文字是用来提示低版本的浏览器(IE6、IE7、IE8),所以低版本浏览器可以看到标签内容。
高版本的浏览器是看不到canvas标签里的文字的。
getContext方法:获取上下文。
fillStyle属性:设置颜色(填充样式)。
fillRect方法:绘制图形(填充矩形)。
fillRect有四个属性,分别是x坐标、y坐标、绘制的宽度、绘制的高度。
ctx.fillRect(x坐标,y坐标,绘制的宽度,绘制的高度);
从上面的代码可以看出,ctx获取了2d的属性和方法,所以ctx变成了对象,也能使用链式语法。