============================== 大纲 ===================================
1如何在html文档中引入canvas
2如何在canvas上绘制各种图形和对象
3如何修改图形和对象
4如何擦除图形和对象
5如何将canvas大小设置为浏览器窗口大小
======================================================================
如何在html文档中引入canvas
在html中引入canvas的方法就是添加<canvas>元素，
仅此而已。不需要任何插件。
附录：
canvas的第一个属性就是canvas的width和height
在不设置的情况下，默认是300px 150px。
canvas仅仅只是html中的一个元素。可以通过CSS
操作它。比如浮动啊。
关于浏览器的问题:目前除了IE浏览器(ie9之前)，其余
的浏览器都支持canvas。当然可以通过ExploreCanvas
脚本来规避这个问题。
=======================================================================
如何在canvas上绘制各种图形和对象
绘制矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//..使用jquery获取特定id属性元素
let canvas = $('#myCanvas');
//get(0)必须的，因为使用的jquery，目前不清楚。
let context = canvas.get(0).getContext('2d');
//fillRect(x, y, width, height)
context.fillRect(40, 40 ,100, 100);
context.strokeRect(10, 10, 200, 200);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="400px" height="400px">
<!--
script脚本放在body前面，那么当程序加载解析时，
存在一个问题。当执行let canvas = $('#myCanvas');
此时还没有加载<canvas id="myCanvas"></canvas>
那为什么不报错呢？只能说明你的思路有问题。
$(document).ready(function(){})只是在DOM加载完毕以后
才会执行。也即是说只有在页面加载完毕之后才开始执行。
-->
</canvas>
</body>
<footer>
<!--
如何移动矩形呢？设置x和y的值。
和fillRect相对的是strokeRect。
fillRect绘制一个矩形，并且给这个矩形充填默认的颜色。
strokeRect绘制一个矩形，但是不充填图形，而仅仅残留边框。
-->
</footer>
</html>
---------------------------------------------------------------------
绘制直线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var context = $('#myCanvas').get(0).getContext('2d');
let width = 600, height = 600;
let position = {x: 200, y: 200};
for (let i = 0; i < 64; i++) {
context.strokeRect(position.x, position.y, width, height);
width = width / 2;
height = height / 2;
}
context.beginPath(); //声明画线
context.moveTo(200, 200); //起点
context.lineTo(800, 800); //终点
context.stroke(); //充填
context.closePath(); //闭合路径
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px">
<!--
清除重叠的边框
-->
</canvas>
</body>
</html>
-----------------------------------------------------------------------
绘制圆弧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var context = $('#myCanvas').get(0).getContext('2d');
context.beginPath();
context.arc(600, 400, 200, 0, Math.PI * 2 / 3, true);
context.closePath();
context.strokeStyle = "rgb(255, 0, 0)";
context.stroke();
//context.fillStyle = "rgb(0, 255, 0)";
//context.fill();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px">
<!--
清除重叠的边框
-->
</canvas>
</body>
</html>
-------------------------------------------------------------------------
绘制文本
提前说明一下：除非你必须使用canva绘制文本，否则，不建议你使用canvas绘制文本。正常的文本
最好使用html中的文本容器，比如span，p，div等。然后使用css移动到指定的位置。
使用canvas绘制的文本本质上不是文字而是图形。所以一旦绘制完成就不可以修改文字的属性。
但是使用p盛放的文字可以动态地修改样式。
文本也分为描边文本fillText和充填文本strokeText。
let word = '写过， 活过，爱过。 --- 司汤达';
context.font = "normal 40px serif";
context.fillText(word, 200, 400);
context.font = '40px serif';
context.strokeText(word, 400, 600);
附录：
canvas仅仅是一个元素，对于绘图贡献最大的并不是canvas
元素本身，而是canvas元素的上下文context。你是在context
中绘图，而不是在canvas本身绘图。这是基本的一点，需要知道。
=========================================================================
如何修改图形和对象
修改图形的充填颜色
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
绘制图形的描边颜色
context.strokeStyle = 'rgb(255, 0, 0)';
context.stroke();
修改图形的线宽
context.lineWidth
=========================================================================
如何擦除图形和对象
局部的擦除，只是局部地擦除context中地图像。
clearRect(x, y, width, height);
彻底地擦除，不仅仅清除所有地图形和图像。而且擦除所有地样式。初始化时使用，比较合适。
canvas.attr('width', canvas.width());
canvas.attr('height', canvas.height());
=========================================================================
如何将canvas大小设置为浏览器窗口大小
普通地元素只需要设置width=100%,height=100%就可以实现元素平铺浏览器。
但是，亲爱的，不幸的是canvas并不支持。canvas会将width=100%,height=100%解释成100px, 100px。
我们必须通过BOM才可以获取浏览器地宽度和高度。进而将获取地宽高赋给canvas。仅此而已。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.js"></script>
<style>
body {margin: 0; padding: 0}
canvas {display: block} /*将canvas设置为块级元素设定宽度和高度避免出现滚动条*/
</style>
</head>
<body>
<canvas id="myCanvas" width="1000px" height="1000px">
</canvas>
<script type="text/javascript">
function canvasResize() {
var canvas = $('#myCanvas');
var context = canvas.get(0).getContext('2d');
/*获取浏览器窗口当前的宽度和高度*/
canvas.attr('width', $(window).get(0).innerWidth);
canvas.attr('height', $(window).get(0).innerHeight);
context.fillRect(0, 0, canvas.width(), canvas.height());
}
//每次动态调整页面大小时，canvas更新宽度和高度。
//使得canvas始终做到和浏览器大小同步。
$(window).resize(canvasResize);
canvasResize();
</script>
</body>
</html>
=================================================================================
中午复习BOMhtml5 canvas基础篇
猜你喜欢
转载自blog.csdn.net/qq_23143555/article/details/81042000
今日推荐
周排行