画布的使用

最新推荐文章于 2023-05-29 08:02:39 发布

干的漂亮

最新推荐文章于 2023-05-29 08:02:39 发布

阅读量732

点赞数

分类专栏： html 文章标签： servlet javascript 开发语言

本文链接：https://blog.csdn.net/weixin_54671516/article/details/126604750

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们学习画布需要掌握这几个要点：

1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形

2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形

3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法

画布的使用步骤如下：

(1)获取canvas对象--获取画布
   通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
    图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
    context.fillStyle='red';
(4)绘制填充图形
   context.fillStyle(10,10,100,100）第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

下面我们通过几个实例来体验一下

1.绘制圆

 <script>
        window.onload = function () {
              //1.获取画布
            var canvas = document.querySelector('canvas')
             // 2.获取画布上下文对象
            var context = canvas.getContext('2d')
            // 开始路径
            context.beginPath();
            // 绘制圆 arc()参数：x y 开始的位置，半径，开始弧度，结束弧度，布尔值
            context.arc(100, 100, 100, 0, Math.PI * 2, true)//Math.PI代表180°
            // 圆的填充样式
            context.fillStyle = 'pink'
            context.fill();
            // 结束路径
            context.closePath()
        }

    </script>
</head>

<body>
    <canvas width="600px" height="600px"></canvas>
</body>

2.线性渐变 createLinearGradient

<!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>
    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas')
            var context = canvas.getContext('2d')
            //    绘制线性渐变图像
            // 1.创建线性渐变对象
            // createLinearGradient()
            var a = context.createLinearGradient(0, 0, 400, 400)
            // 添加渐变色
            // addColorSto阈值0-1（填充颜色的百分比），第二个参数是颜色
            a.addColorStop(0, 'red')
            a.addColorStop(0.5, 'cyan')
            a.addColorStop(1, 'yellow');
            // 将渐变色给到填充样式
        context.fillStyle = a;
        context.fillRect(0, 0, 400, 400);
        }
    </script>
</head>

<body>
    <canvas width="600px" height="600px"></canvas>
</body>

</html>

3.径向渐变 createRadialGradient 同心圆渐变

<!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>
    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas')
            var context = canvas.getContext('2d')
            //    绘制径向渐变图像
            // 1.创建径向渐变对象
            // createRadialGradient()
            // 参数：小圆x,y, r,大圆的X ,Y,R
            var g = context.createRadialGradient(200, 200, 20, 200, 200, 200)
            //    给渐变对象填充颜色
            g.addColorStop(0.25, 'red')
            g.addColorStop(0.5, 'orange')
            g.addColorStop(0.75, 'yellow')
            g.addColorStop(1, 'green')
            context.fillStyle=g
            context.fillRect(0,0,400,400)

        }
    </script>
</head>

<body>
    <canvas width="600px" height="600px"></canvas>
</body>

</html>

4.绘制线段

<!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>
    <script>
        window.onload=function(){
            var canvas =document.querySelector('canvas')
            var context=canvas.getContext('2d')
            context.lineWidth=3
            context.beginPath();
            context.moveTo(0,0)
            context.lineTo(100,100)
            context.lineTo(200,10)
            context.lineTo(300,100)
            context.closePath()
            // 线段
            // context.strokeStyle='blue'
            // context.stroke()
            // 图形
            context.fillStyle='blue'
            context.fill()
        }
    </script>
</head>
<body>
    <canvas width="600px" height="600px"></canvas>
</body>
</html>

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>
    <script>
        window.onload=function(){
            var canvas =document.querySelector('canvas')
            var context=canvas.getContext('2d')
            // var img =new Image();
            // console.log(img);
            // img.src="./音视频/2.jpg"
            // img.onload=function(){
            //     context.drawImage(img,0,0,200,200);
            // }
            // 绘制视频
            var video =document.querySelector('video')
            function draw(){
                context.drawImage(video,0,0,200,200)
                requestAnimationFrame(draw)
            }
            draw()
        }
    </script>
</head>
<body>
    <canvas width="600px" height="600px"></canvas>
    <video controls src="./音视频/1.mp4" width="400px"></video>
</body>
</html>

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>Document</title>
    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas')
            var context = canvas.getContext('2d')
            context.font = '28px blod';
            // context.fillText('string', 100, 100);//填充文本
            context.strokeText('str', 100, 100);//轮廓文本
        }
    </script>
</head>

<body>
    <canvas width="600px" height="600px"></canvas>

</body>

</html>

干的漂亮

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
画布的使用

1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形。3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形。(2)取得上下文(context)--获取画笔。5.绘制图像/ 绘制视频。...
复制链接

扫一扫