zoukankan      html  css  js  c++  java
  • (四)canvas绘制路径

    • save()
      • 样式不受污染的起始范围
    • shadowOffsetX
      • 阴影x轴的距离
    • shadowOffsetY
      • 阴影y轴的距离
    • shadowBlur
      • 模糊度
    • shadowColor
      • 阴影颜色
    • restore()
      • 保护样式不受污染的结束范围
    • clearRect()
      • 可以理解为橡皮擦
      • 参数四个:x轴,y轴,宽度,高度
      • 清除整个画布:0,0,oC.width,oC.height
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>(四)canvas绘制路径</title>
    </head>
    <style>
    * {margin: 0;padding: 0;}
    body { background-color: black; }
    #c1 { background-color: #fff; }
    </style>
    <body>
    <canvas id="c1" width="400" height="400"></canvas>
    <script>
    function $(id) {
    return document.getElementById(id);
    }
    var c1 = $("c1");
    var ctx = c1.getContext("2d");
    ctx.lineWidth = 20;//改变画出的图形的边框粗细,需要写在前面
     
    ctx.save();
    ctx.strokeStyle = "red";
    ctx.shadowOffsetX = 10;//阴影x轴的距离
    ctx.shadowOffsetY = 10;//阴影y轴的距离
    ctx.shadowBlur = 5;//模糊
    ctx.shadowColor = "blue";//阴影的颜色
    ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(100,300);
    ctx.lineTo(200,300);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
     
    ctx.beginPath();
    ctx.moveTo(0,100);
    ctx.lineTo(0,200);
    ctx.lineTo(100,200);
    ctx.closePath();
    ctx.stroke();
     
    ctx.clearRect(50,50,100,100);//清除可以理解为橡皮擦
    //ctx.clearRect(0,0,oC.width,oC.height);//清除整个画布
     
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    修复 Visual Studio Error “No exports were found that match the constraint”
    RabbitMQ Config
    Entity Framework Extended Library
    Navisworks API 简单二次开发 (自定义工具条)
    NavisWorks Api 简单使用与Gantt
    SQL SERVER 竖表变成横表
    SQL SERVER 多数据导入
    Devexpress GridControl.Export
    mongo DB for C#
    Devexress XPO xpPageSelector 使用
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9406799.html
Copyright © 2011-2022 走看看