Canvas基础使用

最新推荐文章于 2023-12-25 22:42:04 发布

LJ·START

最新推荐文章于 2023-12-25 22:42:04 发布

阅读量126

点赞数

分类专栏： Canvas 文章标签： canvas css html5 javascript

本文链接：https://blog.csdn.net/weixin_44790446/article/details/115011644

版权

Canvas 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一.什么是Canvas？

1.HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

2.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

3.你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

二.Canvas基础使用：

<style>

    body{
            text-align: center;
        }
        canvas{
            background-color: #ccc;
        }

</style>

<body>

    <h4>canvas矩形</h4>


    <!--1:使用标签创建画布-->
    <!--2:添加样式-->
    <canvas id="canvas" width="500" height="400"></canvas>

</body>

<script>

    <!--3:js获取画布，获取画笔对象-->
        var canvas=document.getElementById('canvas');
        var ctx=canvas.getContext('2d');

    //5:左上角绘制100*80矩形定点原点(0,0)
        //绘制空心矩形(描边矩形)
        ctx.strokeRect(0,0,100,80);

        //设置实心样式
        // ctx.fillStyle="#f00";

        //绘制实心矩形(填充矩形)
        // ctx.fillRect(0,0,100,80);

        //设置空心样式
        // ctx.strokeStyle="#f00";

        //清空矩形范围内所有元素(清空画布中所有元素)
        // ctx.clearRect(0,0,500,400);

    <!--4:js绘制矩形 50-->

</script>

三.基本知识点：

//绘制100*80空心矩形(描边矩形)，定点为原点(0,0)

ctx.strokeRect(0,0,100,80)

//设置实心样式

ctx.fillStyle="#f00";

//绘制实心矩形(填充矩形)，定点为原点(0,0)

ctx.fillRect(0,0,100,80);

//设置空心样式

ctx.strokeStyle="#f00";

//绘制空心矩形(描边矩形)，定点为原点(0,0)

ctx.strokeRect(0,0,100,80);

//清空矩形范围内所有元素(清空画布中所有元素)

ctx.clearRect(0,0,500,400);