canvas学习笔记

2024年5月31日 206次阅读 来源: 回忆不抵流年

画布相当于一个img标签，可以在画布上绘制内容。画布默认是透明的，所以可以放在另一个元素上面绘制内容，一个页面上可以有多个画布元素
1.请输入代码绘制画布的前提需要在页面上创建一个canvas元素，然后使用js获取到这个canvas元素

        <canvas id="test" width="600" height="200"></canvas>
        <script>
            window.onload=function(){
                var canvas=document.getElementById("test");
                //创建一个2d上下文来绘制
                var context=canvas.getContext('2d');
            }
        </script>

2.绘制矩形的方法
这边的x，y分别为矩形在画布上的x，y位置 width，height表示矩形的宽和高

//绘制填充的矩形
context.fillRect(x,y,width,height);
//绘制一个矩形的边框
context.strokeRect(x,y,width,height);
//清除指定矩形区域，让清除部分完全透明
context.clearRect(x,y,width,height);

填充区域颜色

context.fillStyle='lightblue';

填充颜色需要放在之前才会有效
3.绘制路径的方法

//开始绘制路径
context.beginPath();
//填充路径的内容区域形成实心图形 使用这个方法没有闭合的形状会自动闭合
context.fill();

moveTo起点位置（可以移动触笔的位置），lineTo划线的终点位置，stroke划线的方法
执行了lineTo方法下次的起点位置会变为当前这个位置

context.moveTo(10,10);
context.lineTo(150,50);
context.lineTo(0,50);
context.lineTo(10,10);
//样式
context.strokeStyle='blue';
//线宽
context.lineWidth='10px';
context.stroke();

可以使用划线的方法来绘制多边形

下面是绘制多边形的例子

context.beginPath();
context.moveTo(10,10);
context.lineTo(150,50);
context.lineTo(0,50);
context.lineTo(10,10);
context.stroke();
context.fill();
    原文作者：回忆不抵流年
    原文地址: https://segmentfault.com/a/1190000016495683
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞