html画布初学

最新推荐文章于 2024-05-14 10:20:04 发布

小萌新0.0

最新推荐文章于 2024-05-14 10:20:04 发布

阅读量710

点赞数 1

文章标签： canvas html5

本文链接：https://blog.csdn.net/qq_43615701/article/details/108646540

版权

canvas元素

可被用来通过JavaScript来绘制图形及图形动画

属性

height 该元素所占用的高度，以css像素px表示，默认为150
moz-opaque 设置是否半透明
width 该元素所占用空间的宽度，默认是300

使用canvas绘制直线

ctx,linejoin:指定两条交点的样式
- 可选值；round，miter，bevel
ctx.lineCap:设置线条末端的类型
- 可选值：square，round

<canvas width="600" height="400"> 当前浏览器不支持画布</canvas>

//获取canvas的dom对象
    var cas = document.querySelector('canvas');
    //获取向下文对象
    var ctx = cas.getContext('2d');
    //指定画笔的坐标
    ctx.moveTo(100, 100);
    //指定终点
    ctx.lineTo(300, 100);
    //指定线条的颜色  16进制和rgba都支持
    //绘制之前指定 颜色  属性
    ctx.strokeStyle = "green";
    //指定线条的宽度 ，不能写px单位
    ctx.lineWidth = 10;
    //描边的方式画直线
    ctx.stroke();

移动笔

该功能是一个会成为上述路径列表的一部分moveTo()您可能最能想到的是将笔或铅笔从一张纸上的一个位置提起，然后放在另一张纸上。

moveTo(x, y)

移动笔由指定的坐标x和y。

初始化或beginPath()调用画布时，通常将需要使用该moveTo()函数将起点放置在其他位置。我们还可以moveTo()用来绘制未连接的路径。看看下面的笑脸。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>
<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
       var ctx = canvas.getContext('2d');
  
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
      ctx.stroke();
    }
  }
    </script>
</html>

运行结果：

在这里插入图片描述

线数

lineTo()方法来绘制直线

lineTo(x, y)

绘制一条从当前绘图位置到所指定的位置的线x和y。

案例：

绘制两个三角形一个实心的一个空心的


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
   var canvas=document.getElementById('canvas');
   if(canvas.getContext){
     var ctx=canvas.getContext('2d');
     //绘制实心的
     ctx.beginPath();
     ctx.moveTo(25,25)
     ctx.lineTo(105,25);
     ctx.lineTo(25,105);
      // 绘制实心的
     ctx.fill();

     //绘制空心的
     ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    // 连接起始点
    ctx.closePath();
    //绘制形状
    ctx.stroke();
   }
  }
    </script>
</html>

效果如下：

在这里插入图片描述

绘制一个三角形

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画布的基本使用</title>
    <style>
        canvas {
            border: 1px red solid;
        }
    </style>
</head>

<body>
    <!-- 修改画布的尺寸，使用属性的方式 -->
    <canvas width="600" height="400"> 当前浏览器不支持画布</canvas>
</body>
<script>
    //获取canvas的dom对象
    var cas = document.querySelector('canvas');
    //获取向下文对象
    var ctx = cas.getContext('2d');
    //指定画笔的坐标
    ctx.moveTo(100, 100);
    //指定终点


    ctx.lineTo(300, 100);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 100);
    // //指定线条末端的类型
    // ctx.lineCap = 'round';//圆角

    //指定两条线交点的样式
    // ctx.lineJoin = 'bevel';//默认是直角

    //指定线条的颜色  16进制和rgba都支持
    //绘制之前指定 颜色  属性
    ctx.strokeStyle = "green";
    //指定线条的宽度 ，不能写px单位
    // ctx.lineWidth = 10;


    //描边的方式画直线
    ctx.stroke();
</script>

</html>

画一个矩形

//获取canvas的dom对象
    var cas = document.querySelector('canvas');
    //获取向下文对象
    var ctx = cas.getContext('2d');
    //指定画笔的坐标
    ctx.moveTo(100, 100);
    //指定终点

    //画矩形。四个点，连接
    ctx.lineTo(300, 100);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 300);
    ctx.lineTo(100, 100);
    //指定线条末端的类型
    ctx.lineCap = 'round';//圆角

    //指定线条的颜色  16进制和rgba都支持
    //绘制之前指定 颜色  属性
    ctx.strokeStyle = "green";
    //指定线条的宽度 ，不能写px单位
    ctx.lineWidth = 10;
    //描边的方式画直线
    ctx.stroke();

使用rect方法绘制矩形

rect(x,y,width,height)
- x：左上角x坐标
- y：左上角的y坐标
- width：宽度
- height：高度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="600" height="400" id="cas"></canvas>
</body>
<script>
    var cas = document.querySelector('#cas');
    var ctx = cas.getContext('2d');

    //绘制矩形
    //ctx.rect(左上角x坐标，左上角的y坐标，宽度，高度)；
    ctx.rect(0, 0, 100, 100);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'yellow';
    //开始绘制
    // ctx.stroke();
    //绘制实心矩形
    //填充颜色
    ctx.fillStyle = 'orange';
    ctx.fill();
</script>

</html>

使用canvas绘制圆形

arc（x,y,r,start,end,flag）
- x:圆心x坐标
- y:圆心y坐标
- r:半径
- start:起始角度
- end:终止角度
- flag:False=顺时针 true=逆时针

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="600" height="400" id="myCanvas"> 当前浏览器不支持画布</canvas>
</body>
<script>
    var cas = document.getElementById('myCanvas');
    var ctx = cas.getContext('2d');
    ctx.beginPath();
    ctx.arc(100, 75, 60, 0, 2 * Math.PI);
    //指定颜色
    ctx.fillStyle = "red";
    //绘制空心圆形
    // ctx.stroke();
    //绘制实心圆形
    ctx.fill();
</script>

</html>

vas>

```

小萌新0.0

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html画布初学

canvas元素可被用来通过JavaScript来绘制图形及图形动画属性height 该元素所占用的高度，以css像素px表示，默认为150moz-opaque 设置是否半透明width 该元素所占用空间的宽度，默认是300使用canvas绘制直线ctx,linejoin:指定两条交点的样式可选值；round，miter，bevelctx.lineCap:设置线条末端的类型可选值：square，round<canvas width="600" hei
复制链接

扫一扫