关于canvas一些小demo

最新推荐文章于 2024-08-26 15:14:26 发布

As Before ~

最新推荐文章于 2024-08-26 15:14:26 发布

阅读量255

点赞数

分类专栏：开发成长记录文章标签： canvas绘制 canvas图形非零环绕 canvas动画矩形 canvas绘制图片 canvas随机折线图

本文链接：https://blog.csdn.net/happyStudy_/article/details/94555486

版权

开发成长记录专栏收录该内容

6 篇文章

订阅专栏

这篇博客探讨了canvas的基础知识，包括初始化尺寸、线条样式、非零环绕规则的应用、渐变效果的实现以及动画矩形的创建。此外，还涉及了canvas如何绘制文字、处理图片不失真以及绘制随机折线图的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas会初始化宽度为300像素和高度为150像素。可以使用CSS来定义大小

最简单的例子：

<canvas width="600" height="400"></canvas>

<script type="text/javascript">
   
   //获取画布
   var canvas=document.querySelector("canvas");

   //获取画布上下文对象
   var ctx=canvas.getContext("2d");

   //绘图步骤： 落笔点->连线->描边
   
   ctx.moveTo(100, 100);  //落笔
   ctx.lineTo(100, 300);  //连线
   ctx.stroke();        //描边

</script>

给线条设置样式

strokeStyle设置颜色，lineWidth设置宽度

<script type="text/javascript">
   var cans=document.querySelector("canvas");
   var ctx=cans.getContext("2d");
   //绘制一条线宽为10像素的红色直线
    ctx.strokeStyle="red";
    ctx.lineWidth="10";

    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.stroke();

</script>

设置线条的连接方式lineJoin

beginPath 开启新的图层

<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");

       ctx.lineWidth="20";
       ctx.strokeStyle="red";

       // 设置线的链接方式
       ctx.lineJoin="miter";
        ctx.moveTo(100, 50);
        ctx.lineTo(200, 100);
        ctx.lineTo(100, 150);
        ctx.stroke();


        ctx.beginPath();
         // 设置线的链接方式
        ctx.lineJoin="round";
        ctx.strokeStyle="blue";
        ctx.lineWidth="20";
        ctx.moveTo(250, 50);
        ctx.lineTo(350, 100);
        ctx.lineTo(250, 150);
        ctx.stroke();

        ctx.beginPath();

        ctx.lineJoin="bevel";
        ctx.strokeStyle="pink";
        ctx.lineWidth="20";
        ctx.moveTo(400, 50);
        ctx.lineTo(500, 100);
        ctx.lineTo(400, 150);
        ctx.stroke();
        ctx.fillStyle="red";fillStyle非零环绕原则

</script>

非零环绕案例

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");

       //绘制一个300*300矩形
       ctx.moveTo(150, 50);
       ctx.lineTo(450, 50);
       ctx.lineTo(450, 350);
       ctx.lineTo(150, 350);
       ctx.lineTo(150, 50);

       //开始绘制图形
       
       ctx.moveTo(300, 100);
       ctx.lineTo(200, 200);
       ctx.lineTo(250, 200);
       ctx.lineTo(250, 300);
       ctx.lineTo(350, 300);
       ctx.lineTo(350, 200);
       ctx.lineTo(400, 200);
       ctx.lineTo(300, 100);
       ctx.fill();
</script>

线性渐变

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    //创建渐变方案
    var lgd=ctx.createLinearGradient(100, 50, 300, 50);
       //添加开始颜色
       lgd.addColorStop(0, "red");
      //添加结束颜色
       lgd.addColorStop(1, "blue");
       ctx.strokeStyle=lgd;
       ctx.lineWidth="50";
       ctx.moveTo(100, 50);
       ctx.lineTo(300, 50);
       ctx.stroke();
</script>

径向渐变

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    var rgd=ctx.createRadialGradient(200, 150, 50, 200, 150, 100);
       rgd.addColorStop(0, "red");
       rgd.addColorStop(1, "pink");
       ctx.fillStyle=rgd;
       ctx.moveTo(100, 50);
       ctx.lineTo(300, 50);
       ctx.lineTo(300, 300);
       ctx.lineTo(100, 300);
       ctx.closePath();
       ctx.fill();
</script>

动画矩形

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    //开始位置
    var x=0;
    //处理的是一个增量
    var step=5;
    //改变的方向的
    var i=1;
    //创建一个定时器
    setInterval(function(){
      //先清屏
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      //开始绘制图形
      ctx.fillRect(x, 100, 100, 200);
      //开始处理变量
      x+=step*i;
      if(x>canvas.width-100){
         i=-1;
      }else if(x<0){
         i=1;
      }
    },20);
</script>

关于canvas绘制文字

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    ctx.moveTo(300, 0);
    ctx.lineTo(300, 400);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, 200);
    ctx.lineTo(600,200);
    ctx.stroke();
    //设置文字大小： 与css设置文字一样
    ctx.font="40px 微软雅黑";
    //设置文字的对齐方式
    ctx.textAlign="center";
    //设置文字上下对齐方式
    ctx.textBaseline="middle";
    //设置带阴影的效果
    ctx.shadowColor="red";
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.shadowBlur=10;
    ctx.strokeText("撸起袖子加油干", 300, 200);
    ctx.fillText("撸起袖子加油干", 300, 200);
</script>

关于绘制图片以及处理图片失真方法

<canvas width="600" height="400"></canvas>
<script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    var img=document.createElement("img");
       img.src="1.jpg";
    img.οnlοad=function(){
       var img_width=img.width;
       var img_height=img.height;
       var drowHeight=200*img_height/img_width;
      ctx.drawImage(img, 100, 50, 200,drowHeight);
    }
</script>

关于canvas绘制随机折线图（小案例）

 <canvas width="600" height="400"></canvas>
 <script type="text/javascript">
    //获取canvas画布对象
    var canvas =document.querySelector("canvas");
    //获取绘图上下文
    var ctx=canvas.getContext("2d");
    //绘制网格
    draw();
    ctx.beginPath();
    //绘制坐标系
    draw1();
    ctx.beginPath();
    //随机生成点，首先要确定范围
    // 水平方向   40-560
    // 垂直方向   40-360
    //获取要生成点的个数
    var number=random(5,10);
    var ary=[];
    for(var i=0; i<number; i++) {
       var ox=random(40,560);
       var oy=random(40,360);
       if(ox==oy) {
         continue;
       }
       var obj={
         ox:ox,
         oy:oy
       };
       ary.push(obj);
    }
    ctx.fillStyle="red";
    //开始绘制点
    for(var i=0; i<number; i++) {
       ctx.beginPath();
       ctx.moveTo(ary[i].ox-5,ary[i].oy-5);
       ctx.lineTo(ary[i].ox-5+10,ary[i].oy-5 );
       ctx.lineTo(ary[i].ox-5+10,ary[i].oy-5+10);
       ctx.lineTo(ary[i].ox-5,ary[i].oy-5+10);
       ctx.lineTo(ary[i].ox-5,ary[i].oy-5);
       ctx.fill();
    }
    ctx.beginPath();
    //开始连线
    ctx.strokeStyle="red";
    ctx.moveTo(ary[0].ox, ary[0].oy);
    for(var i=1; i<number; i++) {
       ctx.lineTo(ary[i].ox, ary[i].oy);
    }
    ctx.stroke();
// 随机函数
   function random (min, max) {
      return  Math.floor((max-min)*Math.random())+min;
   }
   function draw1 (){
       //绘制坐标
       var pl=20,
          pr=20,
          pt=20,
          pb=20;
       //绘制横坐标
       ctx.moveTo(pl,400-pb);
       ctx.lineTo(600-pr,400-pb);
       ctx.strokeStyle="blue";
       ctx.stroke();
       ctx.beginPath();
       ctx.moveTo(pl,400-pb);
       ctx.lineTo(pl,pt);
       ctx.stroke();
       //开始绘制三角
       ctx.beginPath();
       var t_w=10,
          t_h=10;
       ctx.moveTo(pl,pt);
       ctx.lineTo(pl-t_w/2,pt+t_h);
       ctx.lineTo(pl-t_w/2+t_w,pt+t_h);
       ctx.lineTo(pl,pt);
       ctx.fillStyle="blue";
       ctx.fill();
       ctx.beginPath();
       ctx.moveTo(600-pr,400-pb);
       ctx.lineTo(600-pr-t_h,400-pb-t_w/2);
       ctx.lineTo(600-pr-t_h,400-pb+t_w/2);
       ctx.lineTo(600-pr,400-pb);
       ctx.fill();
   }
   function draw () {
      //设置每一个格的大小
      var w_h=20;
       //计算绘制多少条横线
       var l_number=canvas.height/w_h;
       ctx.strokeStyle="#ccc";
       for(var i=0; i<l_number; i++) {
          ctx.beginPath();
          ctx.moveTo(0,w_h*i);
          ctx.lineTo(600,w_h*i);
          ctx.stroke();
       }
       //计算绘制多少条竖线
       var v_number=canvas.width/w_h;

       for(var i=0; i<v_number; i++) {
          ctx.beginPath();
          ctx.moveTo(w_h*i,0);
          ctx.lineTo(w_h*i,400);
          ctx.stroke();
       }
    }
 </script>