(精华)2020年6月28日 Canvas 效果动画

最新推荐文章于 2023-01-02 18:52:41 发布

愚公搬代码

最新推荐文章于 2023-01-02 18:52:41 发布

阅读量10w+

点赞数 1

分类专栏： # canvas 文章标签： canvas

本文链接：https://blog.csdn.net/aa2528877987/article/details/106993565

版权

canvas 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

渐变

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>渐变</title>
</head>

<body>
   <canvas id="canvas" width="600" height="800"></canvas>
   <script>
      //线性渐变
      // createLinearGradient(0,0,200,0);
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      // 创建一个线性渐变。使用渐变填充矩形:
      function drawGradient() {
         //开始一个新的绘制路径
         ctx.beginPath();
         ctx.translate(50, 50);
         //创建渐变圆环
         var grd = ctx.createLinearGradient(0, 0, 200, 0);
         //镜像渐变
         //    createRadialGradient(x,y,r,x1,y1,r1)
         grd.addColorStop(0.5, 'red');
         //    grd.addColorStop(0.5,'green');
         //    grd.addColorStop(0.8,'red');
         grd.addColorStop(1, 'blue'); //填充渐变
         ctx.lineWidth = 8;
         ctx.strokeStyle = grd;
         ctx.fillStyle = grd;
         //沿着 100,100 位圆心，画圆
         ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180, true); //路径
         //    ctx.stroke(); // 圆环
         ctx.fill(); //实心圆
      }
      drawGradient();
   </script>
</body>

</html>

网格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d'); //绘制工具，
            //画网格
            function drawLine(stepx, stepy) {
                //样式
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = 'green';
                //绘制竖线
                for (var i = stepx + 0.5; i < canvas.width; i += stepx) {
                    ctx.beginPath(); //新的一条路径
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, canvas.height);
                    ctx.stroke();
                }
                //绘制横线
                for (var i1 = stepy + 0.5; i1 < canvas.height; i1 += stepy) {
                    ctx.beginPath(); //新的一条路径
                    ctx.moveTo(0, i1);
                    ctx.lineTo(canvas.width, i1);
                    ctx.stroke();
                }
            }
            drawLine(10, 10);
        }
    </script>
</body>

</html>

效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>效果</title>
</head>

<body>
  <canvas id="canvas" width="600" height="800" style="border:1px solid red"></canvas>

  <script>
    //平移 transform
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    // ctx.fillStyle = 'green';
    // ctx.fillRect(0,0,50,70);
    //原来的是(画布左上角)
    ctx.save(); //保存原来的状态
    ctx.translate(50, 50);
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, 150, 70);
    ctx.restore(); //还原状态
    ctx.save();
    //缩放scale
    ctx.translate(250, 250);
    ctx.scale(1.5, 0.5);
    ctx.fillStyle = 'green';
    ctx.fillRect(0, 0, 50, 70);
    ctx.restore();
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 200, 150, 70);
  </script>
</body>

</html>

笑脸

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格</title>
</head>

<body>
    <canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d'); //绘制工具，
            //    ctx.translate(300,60);
            ctx.beginPath();
            ctx.arc(75, 75, 50, 0, 360 * Math.PI / 180, true); //绘制一个圆
            //    true ：逆时针
            ctx.moveTo(110, 75);
            ctx.arc(75, 75, 35, 0, 180 * Math.PI / 180, false); //口
            //    false //顺时针
            ctx.moveTo(65, 65);
            ctx.arc(60, 65, 5, 0, 360 * Math.PI / 180, true); //左眼
            ctx.moveTo(95, 65);
            ctx.arc(90, 65, 5, 0, 360 * Math.PI / 180, true); //右眼
            // ctx.moveTo(200,330);
            // ctx.lineTo(230,400);
            ctx.stroke();
        }
    </script>
</body>

</html>