============================== 大纲 ===================================
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>
=================================================================================
中午复习BOM
html5 canvas基础篇
最新推荐文章于 2024-05-02 19:35:29 发布