canvas画布，绘制矩形、圆形、渐变色、图片、文字

The..Fuir

已于 2022-04-26 11:19:38 修改

阅读量2.3k

点赞数 1

于 2022-04-25 21:17:16 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124414342

版权

javascript 同时被 3 个专栏收录

122 篇文章 11 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

画布

canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现

矩形

绘制矩形的步骤：
1. 取得canvas对象
2. 取得2d上下文（context）
3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式
4. 指定线宽，使用图形上下文对象中的lineWidth
5. 绘制矩形，使用图形上下文对象的

代码实现：

<!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>Document</title>
</head>
<body>
<!--     矩形:
    1. 取得canvas对象
    2. 取得2d上下文（context）
    3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式  strokeStyle 边框样式
    4. 指定线宽，使用图形上下文对象中的lineWidth
    5. 绘制矩形，使用图形上下文对象的 -->

    // canvas 画布宽高用heigh和width属性设置
    <canvas height="500" width="500" style="border: 1px solid #333;"></canvas>

    <script>
        // 1.获取canvas对象
        		var canvas = document.getElementsByTagName('canvas')[0]
        // 2.获取canvasd的2d上下文
        		var context = canvas.getContext('2d');
        // 3.设置填充模式   填充/描边,当获取了2d上下文后，所有操作都要在context上进行
            context.fillStyle = 'red'   //填充
            context.strokeStyle = 'blue'  //描边
        // 4.设置线宽  描边时需要设置线宽
        		context.lineWidth = '1'
        // 5.绘制矩形 (x坐标，y坐标，宽度，高度)
            // 填充矩形
            context.fillRect(20,20,100,100)
            // 描边矩形
            context.strokeRect(200,200,200,200)
            // 清除矩形
            // context.clearRect(20,20,30,30)
    </script>

</body>
</html>

圆形

绘制圆形的步骤：

取得canvas对象

取得2d上下文（context）

设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式

指定线宽，使用图形上下文对象中的lineWidth

开始创建路径，context.beginPath()

设置路径context.arc(x, y, radius, startAngle, endAanle, direction),参数分别是：圆心x坐标，圆心y坐标，半径，开始角度，结束角度，绘制为逆时针，false为顺时针（默认）派 =180度派 = 3.1415弧度

角度到弧度的运算方式：Math.PI / 180 * startAngle

关闭路径context.closePath()

设定绘制样式，进行图形绘制fill() stroke() 重复绘制圆形

代码实现：
<!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>画圆形</title>
</head>
<body>
    <canvas height="500" width="500" style="border: 1px solid #333;"></canvas>
    <script>
        // 1.获取canvas对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 2.获取canvasd的2d上下文
        var context = canvas.getContext('2d');
        // 3.设置填充模式   填充/描边
            context.fillStyle = 'red'
            context.strokeStyle = 'blue'
        // 4.设置线宽  描边时需要设置线宽
            context.lineWidth = '1'
        // 5.开始路径
            context.beginPath()
        // 6.设置路径
        //https://www.w3school.com.cn/tags/canvas_arc.asp
            context.arc(200,200,50, Math.PI /180 * 0,Math.PI/180*360,)
        // 7.关闭路径
            context.closePath()
        // 8.绘制圆形
            context.fill()   //填充圆形
            context.stroke()     //描边圆形
    </script>
</body>
</html>

渐变色

绘制渐变的步骤：

取得canvas对象

获取2d上下文context

创建渐变对象，并添加渐变色

var gradient = context.createLinearGradient(xstart,ystart,xend,yend)

参数为：起始点x坐标，y坐标，结束点x坐标，y坐标。

gradient.addColorStop(number,'color')

gradient.addColorStop(number,'color')

number为偏移量，0～1之间

设置填充模式 context.fillStyle = gradient

绘制矩形 context.fillRect(x,y,宽，高)

代码实现

<!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>渐变色</title>
</head>

<body>
    <canvas height="500" width="500" style="border: 1px solid #333;"></canvas>
    <script>
        // 1.获取canvas对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 2.获取canvasd的2d上下文
        var context = canvas.getContext('2d');
        // 3.创建渐变对象 并添加渐变色
        var gradient = context.createLinearGradient(100,100,300,300)
        gradient.addColorStop(0,'#fff')
        gradient.addColorStop(1,'#000')
        // 4.设置填充模式
        context.fillStyle = gradient
        // 5.绘制 矩形
        context.fillRect(100,100,200,200)
    </script>
</body>
</html>

图片

绘制渐变的步骤：

取得canvas对象

获取2d上下文context

var context = canvas.getContext('2d')

创建图像对象

var image = new Image()

Image.src = './photo.jpg'

在图片加载完毕后绘制图片，绘制图像

image.onload = function(){

context.drawImage(image，x，y) 参数：图像，绘制位置的x坐标，y坐标

context.drawImage(image，x，y，w，h) 参数：图像，绘制位置的x坐标，y坐标，宽，高

}

可以设置平铺模式

var pattern = context.createPattern(image,'repeat')

将平铺对象复制给填充模式

context.fillStyle = pattern


<!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>图片</title>
</head>

<body>
    <canvas height="500" width="500" style="border: 1px solid #333;"></canvas>
    <script>
        // 1.获取canvas对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 2.获取canvasd的2d上下文
        var context = canvas.getContext('2d');
        // 3.创建图片对象 并导入图片
        var image = new Image()
        image.src = './photo.png'
        // 4.调用绘制图片的方法 
        image.onload = function(){
            // 绘制图片
            // context.drawImage(image,0,0)
            // 创建平铺对象 并设置平铺模式  
            var pattern = context.createPattern(image,'repeat')
            context.fillStyle = pattern
            context.fillRect(0,0,500,500)
        }
    </script>
</body>
</html>

文字

绘制矩形的步骤：

1. 取得canvas对象
2. 取得2d上下文（context）
3. 设定绘图样式 fillStyle填充样式 strokeStyle 边框样式
4. 指定线宽 lineWidth
5. 设置文字和对齐方式
6. 绘制文字

代码实现：

<!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>文字</title>
</head>

<body>
    <canvas height="500" width="500" style="border: 1px solid #333;"></canvas>
    <script>
        // 1.获取canvas对象
        var canvas = document.getElementsByTagName('canvas')[0]
        // 2.获取canvasd的2d上下文
        var context = canvas.getContext('2d');
        // 3.设置填充模式   填充/描边
        context.fillStyle = 'red'
        context.strokeStyle = 'blue'
        // 4.设置线宽  描边时需要设置线宽
        context.lineWidth = '1'
        // 5.设置文字
        context.font = '40px sans-serif'
        context.textAlign = 'center'
        // 6.绘制文字
        context.fillText('hello canvas', 200,100)    //填充文字
        context.strokeText('hello canvas', 200,200)  //描边文字

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

The..Fuir

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
canvas画布，绘制矩形、圆形、渐变色、图片、文字

画布canvas元素是H5新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。canvas只是一个容器，不具备绘制能力，需要我们编写js代码实现矩形绘制矩形的步骤： 1. 取得canvas对象 2. 取得2d上下文（context） 3. 设定绘图样式，使用图形上下文对象中的fillStyle填充样式 strokeStyle 边框样式 4. 指定线宽，使用图形上下文对象中..
复制链接

扫一扫

专栏目录