canvas绘图基础

最新推荐文章于 2024-11-20 12:35:08 发布

花江夏树

最新推荐文章于 2024-11-20 12:35:08 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/onepunchmen00/article/details/78563334

canvas使用场景

动画、h5游戏、图表

chart.js是使用canvas实现的一个做图表的库

phaser是使用canvas实现的做游戏的库

canvas坐标体系

关于画布大小的坑画布默认大小为300*150

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style type="text/css">
        .canvas{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--在css中设置画布的宽高会出问题 这是个坑  当然也可以使用canvas.width /height方式-->
<canvas id="myCanvas" class="canvas">
    您的浏览器不支持canvas
</canvas>

<canvas id="myCanvas2" class="canvas">
    您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    canvas.width = 100;//通过css样式控制的大小会有缩放
    canvas.height = 100;
    var ctx = canvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100 , 100);
    ctx.stroke();


    var canvas2 = document.getElementById('myCanvas2');
    canvas2.width = 200;//这里才是画布大小
    canvas2.height = 200;
    var ctx2 = canvas2.getContext('2d');
    ctx2.moveTo(0, 0);
    ctx2.lineTo(200 , 200);
    ctx2.stroke();
</script>
</body>
</html>

结果如下

很明显左边的图被拉伸了有模糊的地方

lineto只是将路径存在内存中

stroke绘制

beginpath会将之前存在内存的路径清空

closepath会自动连接起始点和末尾点

绘制圆

ctx.beginPath();
ctx.arc(300 ,300, 50,0 ,2 * Math.PI);//圆心坐标 半径 起始弧度 到终点弧度
ctx.strokeStyle ="000";
ctx.stroke();

绘制矩形

//矩形
ctx.strokeRect(300,100,200,100)

平移、旋转、缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px">

</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //平移的是坐标系的原点 要放在前面
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.stroke();


    ctx.translate(0 , 100);
    ctx.beginPath();
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.stroke();

    //旋转
    ctx.rotate(Math.PI / 4);
    ctx.beginPath();
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "red";
    ctx.stroke();

    //缩放
    ctx.scale(1, 0.5);
    ctx.fillRect(0, -100, 100, 100);
</script>
</body>
</html>

但是以上方法不常用

save 和restore 总是成对出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px">

</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.save();
    //平移的是坐标系的原点 要放在前面
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.stroke();


    ctx.translate(0 , 100);
    ctx.beginPath();
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.stroke();

    //旋转
    ctx.rotate(Math.PI / 4);
    ctx.beginPath();
    ctx.moveTo(0 , 0);
    ctx.lineTo(100, 100);
    ctx.strokeStyle = "red";
    ctx.stroke();

    //缩放
    ctx.scale(1, 0.5);
    ctx.fillRect(0, -100, 100, 100);


//恢复至save的状态
    ctx.restore();


    ctx.beginPath();
    ctx.moveTo(200,200);
    ctx.lineTo(300,300);
    ctx.stroke();
</script>
</body>
</html>

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px">

</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //线性渐变
    //                  第一个点的x,y坐标 第二个点的
  var linearGradient =  ctx.createLinearGradient(50,50, 150,150);
    linearGradient.addColorStop(0,'rgb(255,0,0)');
    linearGradient.addColorStop(1,'rgb(0,0,255)');//百分百位置的颜色
    ctx.fillStyle = linearGradient;
    ctx.fillRect(0,0,200,200);


//径向渐变                   第一个圆的坐标加半径  第二个的
   var radialGradient = ctx.createRadialGradient(400,150 ,0 , 400 ,150 ,100)
    radialGradient.addColorStop(0,'rgb(255,0,0)');
   radialGradient.addColorStop(1,'rgb(0,0,255)');
   ctx.fillStyle = radialGradient;
   ctx.beginPath();
   ctx.arc(400,150,100,0,Math.PI * 2);

   ctx.fill();
</script>
</body>
</html>

文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="600px" height="400px">

</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var str = "hello world";
    ctx.font = "50px sans-serif";

    ctx.textAlign = "center";
    ctx.textBaseline = "top";
    ctx.fillText(str, 300,0); //文字  坐标
    ctx.strokeText(str,0 ,200);

    var width = ctx.measureText(str).width;//计算文本的宽度
    console.log(width);
    //文本高度 canvas没有直接的方法


</script>
</body>
</html>