HTML5 cancas

最新推荐文章于 2024-07-01 07:18:21 发布

月亮不营业

最新推荐文章于 2024-07-01 07:18:21 发布

阅读量349

点赞数 1

分类专栏：笔记文章标签： canvas

本文链接：https://blog.csdn.net/qq_46440394/article/details/119903916

版权

本文介绍了HTML5的canvas元素，用于动态渲染图形。详细讲述了canvas的使用步骤，包括设置宽高、获取上下文及绘制图形的方法。同时，文章对比了canvas与SVG的区别，强调了canvas在图像密集型游戏中的优势，而SVG则适合大型渲染区域的应用。

摘要由CSDN通过智能技术生成

canvas：画布

canvas : 画布，它是一个标签; 允许脚本（js）动态渲染图形

canvas 的使用

1. html中需要定义一个canvas 标签

 <canvas id="mycanvas" height="" width=""></canvas>

注：canvas 的宽高，要通过height,width属性去设置

2. js 中获取canvas，得到canvas 上下文，调用对应的属性和方法

 var context = document.getElementById("mycanvas").getContext("2d");

3. canvas 绘制图形
3.1直线
在这里插入图片描述

 // 绘制直线
     function drawLine() {
   
          context.moveTo(0,0) ; //设置起点 x,y
        context.lineWidth=5;
        context.strokeStyle="red";
       //直线中的点
        context.lineTo(500,300);
        // 结束
        context.stroke();
      }

3.2添加折点：
在这里插入图片描述

    function drawLine() {
   
        context.moveTo(0,0);
        context.lineWidth=5;
        context.strokeStyle="red";
       //直线中的点
        context.lineTo(500,300);
        // 结束
        context.stroke();

        // 新开始路径      context.restore恢复到上一次保存
        context.beginPath();
        context.moveTo(200,200);
        context.lineTo(500,300);
        context.lineWidth=5;
        context.strokeStyle="green";
        context.stroke();
    }