＜canvas＞画布-学习笔记

CYSDLN

已于 2022-07-26 17:09:50 修改

阅读量398

点赞数 1

于 2022-07-15 17:14:38 首次发布

本文链接：https://blog.csdn.net/CYSNLD/article/details/125807116

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<canvas>画布标签

1.画布的介绍与创建

1.1 什么是<canvas>画布

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。

Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。

1.2什么是画布标签

如果里面不写东西再网页上什么也不会显示
默认属性 width为300、height为150,单位都是px
也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议不要使用css属性来设置<canvas>的宽高。
某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素<canvas>，
不支持 <canvas> 的浏览器则会直接渲染替代内容。

1.3创建画布

<script>
     // 1.获取一个画布(要创建一个画布对象)
    var canvas = document.getElementById("canvas");
    //2.创建一个画布的下文对象
    var context = canvas.getContext("2d");
    //3.告诉程序绘画路径开始
    context.beginPath();
    //4.绘制图形的起始点(坐标)
    context.moveTo(0, 0);
    //5.设置图形的连接点
    context.lineTo((180, 180,);
    //6.设置图形的样式
    context.strokeStyle = "red"
    //7.设置描边
    context.stroke();
</script>

效果图 {设置了一条斜线}

2.画布的使用

2.1 设置图形连接点:

lineTo(width,height) 绘制一条线
strokeRect(x, y, width, height) 绘制一个有矩形的边框
fillRect(x, y, width, height) 绘制一个填充的矩形
clearRect(x, y, widh, height) 清除指定矩形区域，然后这块区域会变的完全透明。
closePath() 闭合路径；beginPath:() 清空列表

绘制画布上的矩形框内填充颜色，和清除指定区域的绘制图案

<script>
    // 1.获取一个画布(要创建一个画布对象)
    var canvas = document.getElementById("canvas");
    //2.创建一个画布的下文对象
    var context = canvas.getContext("2d");
    //填充颜色
    context.fillStyle= "red"; 
    //画一个矩形图案
    context.fillRect(0, 0, 100, 100);
    //清除指定区域的矩形图案 清除完后这片区域会变成透明色
    context.clearRect(10,10,20,20);
    context.lineWidth=10;//设置线的粗细
</script>

效果图:

2.2 使用画布绘制虚线

<script>
// 绘制图形得连接点
      context.setLineDash([10,10,10]);
    //   绘制图形的起始点
      context.moveTo(0, 0);
    //   绘制图形的结束点
      context.lineTo(200, 0);
    //   绘制图形的宽度
      context.lineWidth=5;
</script>

利用循环设置虚线(如有使用多量虚线，建议使用循环方法)

<script>
      // 1/获取一个画布（先创建一个画布对象）
      var canvas = document.getElementById("canvas");
      // 2创建一个画布上下文对象
      var context = canvas.getContext("2d");
      // 循环获取起始点以及连接点
      for (var i = 0; i < 30; i++) {
        // 告诉程序绘画路径开始
        context.beginPath();
        context.moveTo(10 * i, 0);
        context.lineTo(10 * i + 5, 0);
        context.closePath();
        // 设置样式
        context.lineWidth = 5;
        // 描边
        context.stroke();
      }
    </script>

虚线效果图:

2.3 使用画布画圆/椭圆

<body>
    <canvas id="canvas" width="800px" height="800px">这是一个画布</canvas>

<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //画圆
    // 两个半圆合并成一个圆
    context.beginPath();
    context.arc(200,100,50,0,Math.PI,true); /*设置Π的X、Y轴和大小*/
    context.stroke();   /*画线*/
    context.beginPath();        /*表明接下来绘制的图形将是一个新的路径*/
    context.arc(200,100,50,0,Math.PI,false);/*设置Π的X、Y轴和大小*/
    // context.closePath();
    context.stroke();   /*画线*/
    //画椭圆
    context.ellipse(100,100,50,30,0,0,Math.PI*2);
    context.stroke();
</script>
</body>

画两条以(X,Y)轴为中心弧形的线 {画线 context.stroke(); } 使用(X,Y)轴的路径把两条弧线组成一个圆.

圆效果图: