canvas 基本使用

最新推荐文章于 2024-06-04 10:27:09 发布
流氓也是种气质 _Cookie
最新推荐文章于 2024-06-04 10:27:09 发布
阅读量2.2k
点赞数
分类专栏： css 文章标签： javascript html canvas
本文链接：https://blog.csdn.net/qq_37550440/article/details/122713139
版权
css 专栏收录该内容
15 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas demo</title>
</head>
<body>
  <img id="imgbox" src="./app.png" width="100px" height="100px">
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
  <canvas id="myCanvasDemo" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
  <script>
    // 在此之前我们必须要了解的是栅格和坐标空间的关系
    /*
      如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。
      栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。
      所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。
      后面我们会涉及到坐标原点的平移、网格的旋转以及缩放等。
    */
    //绘制矩形
    var c=document.getElementById("myCanvas");
    //获得 2d 上下文对象
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    //canvas 的左上角坐标为 (0,0) 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
    ctx.fillRect(0,0,150,75);
    // strokeRect(x, y, width, height)：绘制一个矩形的边框 但是不填充
    ctx.strokeRect(0,0,150,150);

    //画线 moveTo(x,y) 定义线条开始坐标， lineTo(x,y) 定义线条结束坐标， 然后使用 stroke() 方法来绘制线条:
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();

    // 画圆 arc(x,y,r,start,stop)
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    ctx.closePath();

    // 很费解的画扇形
    ctx.beginPath();
    ctx.arc(95,50,40,2*Math.PI/8,2*Math.PI/4);
    ctx.moveTo(95,50);
    ctx.lineTo(95,90);
    ctx.moveTo(95,50);
    ctx.lineTo(125,80);
    ctx.stroke();
    ctx.closePath();

    ctx.font="30px Arial";
    // 文本实心
    ctx.fillText("Hello World",200,50);
    // 文本空心
    ctx.strokeText("Hello World",10,50);

    // 绘制 img 标签元素中的图片
    // let img=document.querySelector("#imgbox");
    // img.onload = function() {
    //   ctx.drawImage(img,100,100);
    // }

    // 绘制图片方法2，加载本地图片
    // let img = new Image() // 创建一个<img>元素
    // img.src = './app.png' // 设置图片源地址
    // // 脚本执行后图片开始装载。
    // img.onload = function() {
    //   // 参数 1：要绘制的 img  
    //   // 参数 2、3：绘制的 img 在 canvas 中的坐标
    //   // 参数 4、5：width 和 height
    //   ctx.drawImage(img,100,100,200,200);
    // }

    // 绘制路劲
    // 1.创建路径起始点 beginPath()
    // 2.调用绘制方法去绘制出路径 moveTo(x, y)
    // 3.把路径封闭 closePath()
    // 4.一旦路径生成，通过描边或填充路径区域来渲染图形。 stroke() --》 fill()
    
    // 绘制三角形 第一条线段的末尾与第二条线段的起点是连着的才能构建成一个三角形
    function draw1() {
      var c=document.getElementById("myCanvasDemo");
        //获得 2d 上下文对象
      var ctx=c.getContext("2d");
      ctx.beginPath()
      ctx.moveTo(0,200)
      ctx.lineTo(100,200)
      ctx.lineTo(100,300)
      //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
      ctx.closePath()
      //绘制路径。stroke不会自动closePath()
      ctx.strokeStyle = 'red'
      ctx.stroke()
      // 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。
      // 如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。
      // fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形轮廓的颜色
      ctx.fillStyle = '#000'
      ctx.fill()
      
    }
    draw1()

    /* 绘制圆弧方法1
    // arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，
    // 以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。
    // anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。
    注意：
      这里的度数都是弧度。
      0 弧度是指的 x 轴正方向。 Math.PI*2是一个完整的圆  */
    function draw() {
      var c=document.getElementById("myCanvasDemo");
      var ctx=c.getContext("2d");
      ctx.beginPath()
      ctx.arc(30,30,50,0,Math.PI/2)
      ctx.stroke()
      ctx.beginPath()
      // ctx.arc(100,100,50,-Math.PI/2,Math.PI/2)
      ctx.arc(100,100,50,0,-Math.PI/2,false)
      ctx.stroke()
      ctx.fill()
    }
    // draw()

    // 绘制圆弧方法2
    function draw(){
      var c=document.getElementById("myCanvasDemo");
      var ctx=c.getContext("2d");;
      ctx.beginPath();
      ctx.moveTo(50, 50);
        //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
      ctx.arcTo(200, 50, 200, 200, 100);
      ctx.lineTo(200, 200)
      ctx.stroke();
      ctx.beginPath();
      // 绘制几个小正方形
      ctx.rect(50, 50, 10, 10);
      ctx.rect(200, 50, 10, 10)
      ctx.rect(200, 200, 10, 10)
      ctx.fill()
    }
    draw()

    // 绘制二次贝塞尔曲线: quadraticCurveTo(cp1x, cp1y, x, y)
    // 参数 1 和 2：控制点坐标
    // 参数 3 和 4：结束点坐标
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(10, 200); //起始点
        var cp1x = 40, cp1y = 100;  //控制点
        var x = 200, y = 200; // 结束点
        //绘制二次贝塞尔曲线
        ctx.quadraticCurveTo(cp1x, cp1y, x, y);
        ctx.stroke();
    
        ctx.beginPath();
        ctx.rect(10, 200, 10, 10);
        ctx.rect(cp1x, cp1y, 10, 10);
        ctx.rect(x, y, 10, 10);
        ctx.fill();
    
    }
    // draw();

    //状态的保存save和恢复restore
    var ctx;
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
    
        ctx.fillRect(0, 0, 150, 150);   // 使用默认设置绘制一个矩形
        ctx.save();                  //1 保存默认状态
    
        ctx.fillStyle = 'red'       // 在原有配置基础上对颜色做改变
        ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
        ctx.save();                  // 2 保存当前状态

        ctx.fillStyle = '#FFF'       // 再次改变颜色配置
        ctx.fillRect(30, 30, 90, 90);   // 使用新的配置绘制一个矩形
    
        ctx.restore();               //累计调用了一次使用2 重新加载之前的颜色状态
        // ctx.restore();  
        ctx.fillRect(45, 45, 60, 60);   // 使用上一次的配置绘制一个矩形
    
        ctx.restore();               //累计调用了二次使用1   加载默认颜色配置
        ctx.fillRect(60, 60, 30, 30);   // 使用加载的配置绘制一个矩形
    }
    // draw();

    // 九、变形
    //  translate(x, y),用来移动 canvas 的原点到指定的位置,x 是左右偏移量，y 是上下偏移量，
    var ctx;
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.save(); //保存坐原点平移之前的状态,即保存原点为(0,0)
        ctx.translate(100, 100);
        ctx.strokeRect(0, 0, 100, 100)
        ctx.restore(); //恢复到最初状态, 即恢复原点时(0,0)
        ctx.translate(220, 220);
        ctx.fillRect(0, 0, 100, 100)
    }
    // draw();

    //  rotate旋转坐标轴。
    var ctx;
    function draw(){
      var canvas = document.getElementById('myCanvasDemo');
      if (!canvas.getContext) return;
      var ctx = canvas.getContext("2d");
    
      ctx.fillStyle = "red";
      ctx.save(); // 保存原点为0,0
    
      ctx.translate(100, 100); //移动原点位置到100,100
      //注意顺序 先旋转45度在绘制图形  Math.PI / 180 * 45表示的是45度
      ctx.rotate(Math.PI / 180 * 45);
      ctx.scale(1.5,1.5)
      ctx.fillStyle = "blue";
      ctx.fillRect(0, 0, 100, 100);
      ctx.restore(); // 重置原点坐标为0,0
    
      ctx.save();
      ctx.translate(0, 0); //移动到画布左上角的原点
      ctx.fillRect(0, 0, 50, 50)
      ctx.restore();

      ctx.moveTo(0,0) //按上次画布原点开始绘制,看是否有重置原点,有则按重置的原点绘制
      ctx.lineTo(70,100)
      ctx.stroke()
    }
    // draw();

    // transform (变形矩阵)
    var ctx;
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.transform(1, 1, 1, 1, 1, 1);
        ctx.fillRect(0, 0, 100, 100);
    }
    // draw();

    // 十、合成
    var ctx;
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
    
        ctx.fillStyle = "blue";
        ctx.fillRect(0, 0, 200, 200);
    
        ctx.globalCompositeOperation = "source-over"; //全局合成操作
        ctx.globalCompositeOperation = "source-in"
        ctx.globalCompositeOperation = "source-out"
        ctx.fillStyle = "red";
        ctx.fillRect(100, 100, 200, 200);
    }
    // draw();

    // 十一、裁剪路径 clip(),这个存在疑惑
    var ctx;
    function draw(){
        var canvas = document.getElementById('myCanvasDemo');
        if (!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
    
        ctx.beginPath();
        ctx.arc(200,200, 100, 0, Math.PI * 2);
        ctx.clip();
    
        ctx.fillStyle = "pink";
        ctx.fillRect(20, 20, 100,100);
    }
    // draw();

    // 十二、动画
    let sun;
let earth;
let moon;
var ctx1;
function init(){
    sun = new Image();
    earth = new Image();
    moon = new Image();
    sun.src = "./sun.png";
    earth.src = "./earth.png";
    moon.src = "./moon.png";
 
    let canvas = document.getElementById('myCanvasDemo');
    ctx1 = canvas.getContext("2d");
 
    sun.onload = function (){
        draw()
    }
 
}
// init();
function draw(){
    ctx.moveTo(0,0)
    ctx.lineTo(100,100)
    ctx.stroke()
    ctx.clearRect(0, 0, 300, 300); //清空所有的内容
    /*绘制 太阳*/
    ctx.drawImage(sun, 0, 0, 300, 300);
 
    ctx.save();
    ctx.translate(150, 150);
 
    //绘制earth轨道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,0,0.5)";
    ctx.arc(0, 0, 100, 0, 2 * Math.PI)
    ctx.stroke()
 
    let time = new Date();
    //绘制地球
    ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
    ctx.translate(100, 0);
    ctx.drawImage(earth, -12, -12)
 
    //绘制月球轨道
    ctx.beginPath();
    ctx.strokeStyle = "rgba(255,255,255,.3)";
    ctx.arc(0, 0, 40, 0, 2 * Math.PI);
    ctx.stroke();
 
    //绘制月球
    ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
    ctx.translate(40, 0);
    ctx.drawImage(moon, -3.5, -3.5);
    ctx.restore();
 
    requestAnimationFrame(draw);
}
  </script>
</body>
</html>
流氓也是种气质 _Cookie
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 基本使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas dem.
复制链接

扫一扫