了解canvas画布

一、什么是 Canvas?
  • HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
  • 画布是一个矩形区域,可以控制其每一像素
  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
二、canvas基本使用
  • 添加canvas元素(创建画布)
<canvas id="myCanvas" width="300" height="300"> </canvas>

canvas画布的默认尺寸是300*150

  • 通过JavaScript绘制图像
<script>
// 1、获取到canvas元素
var c= document.getElementById("myCanvas");
// 2、执行上下文(绘制画笔)
var ctx= c.getContext('2d');
// 3、填充矩形
ctx.fillRect(30, 30, 100, 100);
</script>
三、绘制的方法

绘制矩形

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根据指定id,得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    //fillStyle属性可以填充颜色。
    cxt.fillStyle="pink";
    cxt.fillRect(0,0,150,75);
  </script>

在这里插入图片描述

绘制线条

 <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
    //根据指定id,得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    cxt.beginPath();//开始绘制路径(可写),可理解为断点,如果只有一个可不写,若有多个线条,让上一个和下一个不受影响,就要加上此方法
    cxt.moveTo(10,10);  //移动到指定位置,开始坐标
    cxt.lineTo(150,50);  //创建到达位置的一条线,结束坐标
    cxt.lineTo(10,50);
    cxt.strokeStyle="pink";  //路径颜色
    cxt.lineWidth="5";  // 线宽
    cxt.stroke(); //进行绘制(结束,颜色,宽度等都在里面进行)
    </script>

绘制圆

  <canvas id="myCanvas" width="200" height="100"></canvas>
  <script>
    //根据指定id,得到对象
    var c=document.getElementById("myCanvas");
    //然后创建context对象
    var cxt=c.getContext("2d");
    cxt.beginPath();
    cxt.strokeStyle = "pink";
     //arc(x,y,半径,起始角度0,结束角度2*Math.PI)
    cxt.arc(95,50,40,0,2*Math.PI);
    cxt.stroke();
  </script>

在这里插入图片描述
案例:绘制太极图

<canvas id="cv" width="300px" height="300px"></canvas>
    <script>
        var canvas = document.getElementById("cv");
        var context = canvas.getContext("2d");
        
        context.beginPath();
        context.arc(100,100,100,0,Math.PI*2);
        context.closePath();
        context.stroke();
        
        context.beginPath();
        context.arc(100,100,100,1.5,Math.PI*1.5);
        context.closePath();
        context.fill();
        		
        context.beginPath();
        context.arc(100,50,50,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,50,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,50,15,0,Math.PI*2);
        context.fillStyle = "black";
        context.closePath();
        context.fill();
        
        context.beginPath();
        context.arc(100,150,15,0,Math.PI*2);
        context.fillStyle = "white";
        context.closePath();
        context.fill();
    </script>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页