流浪のwolf

卷帝

导航

html5新标签 画布 canvas 替代了 flash

绘制矩形边框，和填充不同的是绘制使用的是strokeRect， 和strokeStyle实现的

 

绘制路径

绘制路径的作用是为了设置一个不规则的多边形状态

路径都是闭合的，使用路径进行绘制的时候需要既定的步骤：

  1. 需要设置路径的起点

  2. 使用绘制命令画出路径

  3. 封闭路径

  4. 填充或者绘制已经封闭路径的形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" style="width: 50px;height: 50px;background-color: red;" >
        清屏
    </button>
    <canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>
    <script >
        const dom  = document.querySelector("#context");
        // console.log(dom.getContext);
        if(!dom.getContext) {
            alert("当前浏览器不支持")
        }
        var btn = document.querySelector("#btn");
       
        const ctx = dom.getContext("2d");  // 获取2D上下文
        if(ctx != null) {
            // 创建一个路径
            ctx.beginPath()
            ctx.moveTo(100,100);  // 需要设置路径的起点
            ctx.lineTo(200,200);
            ctx.lineTo(400,200);
            ctx.lineTo(400,100);  // 使用绘制命令画出路径
            ctx.closePath();  // 封闭路径
             ctx.strokeStyle = 'red';
            ctx.stroke();   
            ctx.fillStyle = "blue";
            ctx.fill();  // 填充或者绘制已经封闭路径的形状
        }


        btn.onclick = () => {
            ctx.clearRect(0,0,600,600);
        } 
    </script>
</body>
</html>

总结我们要绘制一个图形，要按照顺序

  1. 开始路径ctx.beginPath()
  2. 移动绘制点ctx.moveTo(x, y)
  3. 描述绘制路径ctx.lineTo(x, y)
  4. 多次描述绘制路径ctx.lineTo(x, y)
  5. 闭合路径ctx.closePath()
  6. 描边ctx.stroke()
  7. 填充ctx.fill()

此时我们发现之前我们在学习绘制矩形的时候使用的是fillRect和strokeRect，但是实际上fill和stroke也是具有绘制填充功能的

stroke(): 通过线条来绘制图形轮廓。

fill(): 通过填充路径的内容区域生成实心的图形。

 

渲染图片

// 导入图片
if(ctx !== null) {
    // 第一步是创建一个image元素
    let image:HTMLImageElement = new Image()
    // 用src设置图片的地址
    image.src = "image/test1.png"
    // 必须要在onload函数内绘制图片，否则不会渲染
    image.onload = function() {
        ctx.drawImage(image, 100, 100)
    }
}

canvas是可以进行变形的，但是变形的不是元素，而是ctx，ctx就是整个画布的渲染区域，整个画布在变形，我们需要在画布变形前进行保存和恢复：

  • save()：保存画布（canvas）的所有状态。
  • restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

posted on 2024-05-12 09:44  流浪のwolf  阅读(25)  评论(0)  编辑  收藏  举报