Canvas的基本用法&&绘制图形

最新推荐文章于 2024-04-23 15:12:21 发布

_筱龙

最新推荐文章于 2024-04-23 15:12:21 发布

阅读量676

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/IT_qslong/article/details/108652111

版权

Canvas的基本用法

Canvas API的作用

Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

canvas 元素的基本用法

<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :

<canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas>

<canvas>在没有设置宽高的时候,默认初始化为 :

<canvas width='300px' height='150px'></canvas>

注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为明确规定宽高，而不是使用CSS。

渲染上下文

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容

getContext()：这个方法是用来获得渲染上下文和它的绘画功能，getContext()只有一个参数。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

代码的第一行通过使用document.getElementById()方法来为 canvas 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

画布坐标

绘制矩形

fillRect(x, y, width, height)

fillRect()方法绘制一个填充的矩形

x
- 矩形起始点的 x 轴坐标
y
- 矩形起始点的 y 轴坐标
width
- 矩形的宽度
height
- 矩形的高度

fillStyle()方法用于填充图形的颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q0xcJQ2w-1600344921958)(https://qi-1259247085.cos.ap-beijing.myqcloud.com/作业/B{(L2GY3L3_$35[0M)]AN_]O.png)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘画矩形</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "red";
                ctx.fillRect (100, 50, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

strokeRect(x, y, width, height)

strokeRect()方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定

x
- 矩形起点的 x 轴坐标。
y
- 矩形起点的 y 轴坐标。
width
- 矩形的宽度。正值在右侧，负值在左侧。
height
- 矩形的高度。正值在下，负值在上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <script>
        function draw(){
            var canvas=document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
            }
            //设置他的填充颜色
            ctx.fillStyle="green"
            //设置矩形的位置和填充大小
            ctx.fillRect(20,20,150,150)
            //设置描边矩形的位置和填充大小
            ctx.strokeRect(65,60,45,45)
        }
    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

clearRect(x, y, width, height)

clearRect()方法清除指定矩形区域，让清除部分完全透明。

x
- 矩形起始点的 x 轴坐标
y
- 矩形起始点的 y 轴坐标
width
- 矩形的宽度
height
- 矩形的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <script>
        function draw(){
            var canvas=document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
            }
            //设置他的填充颜色
            ctx.fillStyle="green"
            //设置矩形的位置和填充大小
            ctx.fillRect(20,20,150,150)
            //设置描边矩形的位置和填充大小
            ctx.clearRect(65,60,45,45)
        }
    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

绘制路径

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合

方法	描述
fill()	填充当前绘图（路径)
stroke()	绘制已定义的路径
beginPath()	起始—条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo(	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆)
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回true，否则返回false

绘制三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <script>
        function draw(){
            var canvas=document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
                //创建一条路径
                ctx.beginPath();
                //把路径移动到画布中的指定点，不创建线条
                ctx.moveTo(75, 50);
                //添加一个新点，然后在画布中创建从该点到最后指定点的线条
                ctx.lineTo(100, 75);
                //再添加一个新点，然后在画布中创建从该点到最后指定点的线条
                ctx.lineTo(100, 25);                
                //填充当前绘图
                ctx.fill();
            }          
        }
    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

这里从调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面，两条线段绘制后构成三角形的两条边。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <script>
        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>
</head>
<body onload="draw()">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矩形</title>
    <script>
        function draw(){
            var canvas=document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
                
                for(var i = 0; i < 4; i++){
                    for(var j = 0; j < 3; j++){
                      ctx.beginPath();
                      var x = 25 + j * 50; // x 坐标值
                      var y = 25 + i * 50; // y 坐标值
                      var radius = 15; // 圆弧半径
                      var startAngle = 0; // 开始点
                      var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
                      var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针
              
                      ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
              
                      if (i>1){
                        ctx.fill();
                      } else {
                        ctx.stroke();
                      }
                    }
                  }
               
            }          
        }
    </script>
</head>
<body onload="draw()">
    <canvas id="canvas" width="350" height="350"></canvas>
</body>
</html>

_筱龙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Canvas的基本用法&&绘制图形

Canvas的基本用法Canvas API的作用Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。canvas 元素的基本用法<canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 :<canvas id="tutorial" width="150" height="150">浏览器版本不支持&
复制链接

扫一扫