html5 canvas基础篇

最新推荐文章于 2025-05-16 07:36:09 发布
原创最新推荐文章于 2025-05-16 07:36:09 发布 · 193 阅读
0 ·
CC 4.0 BY-SA版权
canvas 专栏收录该内容
1 篇文章
订阅专栏
本文详细介绍了如何在HTML文档中引入并使用canvas元素进行绘图，包括绘制矩形、直线、圆弧及文本等基本图形的方法。同时，还介绍了如何修改、擦除图形以及将canvas大小设置为浏览器窗口大小。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
============================== 大纲 ===================================
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