canvas画布

最新推荐文章于 2023-08-16 16:02:58 发布

web_zsh

最新推荐文章于 2023-08-16 16:02:58 发布

阅读量1.1k

点赞数

分类专栏： html5 文章标签： canvas html html5

本文链接：https://blog.csdn.net/web_only_/article/details/101618426

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

canvas标签

<canvas></canvas>

接下来使用支持H5的浏览器打开该页面，将会看到如下内容：
在这里插入图片描述
canvas画布标签兼容处理：
如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。

<canvas>您的浏览器不支持canvas标签</canvas>

结果分析：
由上述结果可以分析出，在H5中，canvas标签本身并没有任何行为，仅仅只是在页面上占用指定大小的页面空白空间。canvas标签就相当于一块空白的画布，还需要使用js提供的API编写相应的代码从而在这块画布上绘制出图形。
通俗理解：
canvas就是一块画布，可以使用js当画笔在上面绘画，可以显示在网页上。

canvas标签常用属性

属性	默认值
id	无（为画布起一个id名称）
height	300（设置canvas的高度）
width	150（设置canvas的宽度）

注意：

如果浏览器不兼容，也可以使用flash等手段进行优雅降级
不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸
重新设置canvas标签的宽高属性会导致画布擦除所有的内容
可以给canvas画布设置背景色

画布宽高注意事项：

canvas画布是一个行内块级元素，该元素默认的宽高为300*150，可以通过元素的width属性和height属性改变默认的宽高。
不能使用CSS样式控制canvas元素宽高，否则会导致绘制的图形拉伸
原因：因为canvas的默认高度是300*150，所以如果使用css为canvas设置width和height，会导致canvas绘制的图像被压缩。所以开发中使用width与height属性来设置canvas的宽高，而不是通过CSS。

canvas的平面坐标系：
在这里插入图片描述
canvas的角度坐标系：

图形绘制基本步骤：

第1步：获取画布对象：var canvas = document.querySelector(’…’);
第2步：获得上下文即画笔：var ctx = canvas.getContext(‘2d’);
第3步：记录绘制起始点：ctx.moveTo(sx, sy);
第4步：绘制线至终点：ctx.lineTo(dx, dy);
第5步：封闭路径：ctx.closePath();
第6步：绘制描边确定直线中起点和端点的连线：ctx.stroke();

JavaScript脚本中< canvas >常用操作

操作	JavaScript代码
获取画布	var canvas=document.getElementById(“canvas”);
获取画笔	var ctx=canvas.getContext(“2d”);
设置画布宽度	canvas.width=600;
设置画布高度	canvas.height=400;
获取画布宽度	var canvasWidth=canvas.offsetWidth;
获取画布高度	var canvasHeight=canvas.offsetHeight;

基本图形绘制—矩形

在这里插入图片描述

    <canvas id="canvas">您的浏览器不支持canvas标签</canvas>
    <script>
        //1、获取画布对象
        var canvas = document.querySelector("#canvas");
        //2、获得上下文，即画笔
        var ctx = canvas.getContext("2d");
        //重新设置标签的属性宽高，注意：不要用canvas.style.height
        canvas.width = 300;
        canvas.height = 250;
        // 绘制矩形
        ctx.beginPath();
        ctx.strokeRect(10,10,250,200);//绘制边线矩形
        ctx.rect(15,15,200,150);//绘制普通矩形
        // （rect()方法只是规划了矩形的路径，并没有填充和描边，需要单独描边或填充）
        //快速创建一个描边的矩形
        ctx.fillStyle = "lightblue";//填充前，可以设置填充的颜色
        ctx.fillRect(20,20,180,100);//绘制填充矩形；
        //清除矩形
        ctx.clearRect(25,25,50,50);
        ctx.stroke();//绘制
    </script>

案例1：tree树

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <canvas id="canvas">您的浏览器不支持canvas标签</canvas>
    <script>
        // 1、获取画布
        var canvas = document.querySelector("#canvas");
        // 2、获取下文对象CanvasRenderingContext2D，即画笔
        var ctx = canvas.getContext("2d");
        canvas.width = 500;
        canvas.height = 600;
        // 3、绘制直线
        ctx.beginPath();//开始绘制，开始路径规划
        ctx.moveTo(250,50);//绘制直线的起点
        ctx.lineTo(110,150);//绘制直线的端点
        ctx.lineTo(200,150);
        ctx.lineTo(80,250);
        ctx.lineTo(200,250);
        ctx.lineTo(50,350);
        ctx.lineTo(230,350);

        ctx.lineTo(230,480);
        ctx.lineTo(270,480);
        ctx.lineTo(270,350);

        ctx.lineTo(450,350);
        ctx.lineTo(300,250);
        ctx.lineTo(420,250);
        ctx.lineTo(300,150);
        ctx.lineTo(390,150);
        // ctx.lineTo(250,50);
        ctx.closePath();//封闭路径
        ctx.lineWidth = 1.0;//设置线宽
        ctx.strokeStyle = "skyblue";//设置线的颜色
        ctx.stroke();//绘制
        ctx.fillStyle = "skyblue";//设置填充颜色
        ctx.fill();//填充图形
    </script>
</body>
</html>

案例2：umbrella雨伞

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雨伞</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            border: 1px solid gray;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        //1、获取画布
        var canvas = document.querySelector("#canvas");
        //2、获取上下文对象CanvasRenderingContext2D，即画笔
        var umbrella = canvas.getContext("2d");
        canvas.width = 400;
        canvas.height = 400;
        //3、绘制直线
        umbrella.beginPath();//开始绘制，开始路径规划（开始了一个新状态，新线径）
        umbrella.arc(200,150,100,0,Math.PI,true);
        umbrella.closePath();
        umbrella.lineWidth = 3.0;//设置线宽
        umbrella.strokeStyle = "#ff5857";//设置线的颜色
        umbrella.stroke();//绘制
        umbrella.fillStyle = "#ff5857"
        umbrella.fill();

        umbrella.beginPath();//开始绘制，开始路径规划（开始了一个新状态，新线径）
        /*这里着重强调下 beginPath: 核心的作用是将不同绘制的形状进行隔离，
        *每次执行此方法，表示重新绘制一个路径，
        *跟之前的绘制的墨迹可以进行分开样式设置和管理。
        *新状态可以继承之前状态的样式，但是当前状态设置的所有样式只能用于当前状态。
        */
        umbrella.moveTo(200,150);
        umbrella.lineTo(200,280);
        umbrella.arc(180,285,20,0,Math.PI,false);
        umbrella.lineWidth = 3.0;//设置线宽
        umbrella.strokeStyle = "#ff5857";//设置线的颜色
        umbrella.stroke();//绘制
    </script>
</body>
</html>

web_zsh

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas画布

canvas标签<canvas></canvas>接下来使用支持H5的浏览器打开该页面，将会看到如下内容：canvas画布标签兼容处理：如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。<canvas>您的浏览器不支持canvas标签</canvas>结果分析：由上述结果可以分析出，在H5中，canvas标...
复制链接

扫一扫

专栏目录