前端基础（二十九、HTML5 canvas画布）

最新推荐文章于 2024-08-22 11:32:42 发布

小鱼干儿er

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量2k

点赞数 4

分类专栏：前端学习文章标签： canvas 前端 html5 html js

本文链接：https://blog.csdn.net/qq_45689821/article/details/114177733

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

二十九、HTML5 canvas画布

前言
canvas画布
- canvas常用的属性
- canvas常用的方法
例子
- 1. 画一条从坐标(0,0)到(100,100)的渐变"2"
- 2.制作一个画板

前言

HTML5中新增了 <canvas> 标签， <canvas> 标签用于在网页上绘制图形。画布是一个矩形的区域，它拥有多种绘制路径、圆形、字符以及添加图像的方法。

canvas画布

canvas常用的属性

fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle ：设置或返回用于笔触的颜色、渐变或模式
shadowColor：设置或返回用于阴影的颜色
shadowBlur：设置或返回用于阴影的模糊级别
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离
lineWidth：设置或返回当前的线条宽度

canvas常用的方法

createLinearGradient()：创建线性渐变
addColorStop()：设置渐变对象中的颜色和停止位置
rect()：创建矩形
fillRect()：绘制“被填充”的矩形
strokeRect()：绘制矩形（无填充）
clearRect()：在给定的矩形内清除指定的像素
fill()：填充路径
- 如果路径未封闭则创建一条从路径开始到结束的直线将路径封闭
stroke()：绘制已定义的路径
beginPath()：起始一条路径，或重置当前路径
moveTo()：把路径移动到画布中的指定点，不创建线条
closePath()：创建从当前点回到起始点的路径
lineTo(x,y)：创建一条路径，从当前点开始，到(x,y)点结束
- 不会绘制线条
scale()：缩放当前绘图至更大或更小
rotate()：旋转当前绘图
translate()：重新映射画布上的 (0,0) 位置
transform()：替换绘图的当前转换矩阵
fillText()：在画布上绘制“被填充的”文本
strokeText()：在画布上绘制文本（无填充）
drawImage()：向画布上绘制图像、画布或视频

例子

1. 画一条从坐标(0,0)到(100,100)的渐变"2"

getContext("2d")：在使用canva绘制路径时，需要创建 context 对象，使用 getContext("2d") 方法
width：canvas对象的属性，在canvas中不能使用内联样式如：
style="width: 300px; height: 300px;" 来设置画布的宽高，否则画布的内容就会被拉伸，而应当直接写画布的宽高
height：同上

<body>
    <canvas id="can" width="300px" height="300px" style="border: 2px solid lightsalmon; background-color: black;"></canvas>
    <script>
        var oCan = document.querySelector("#can");
        var canContext = oCan.getContext("2d");
        var gradient = canContext.createLinearGradient(0,0,200,0);
        gradient.addColorStop("0","lightsalmon");
        gradient.addColorStop("0.5","lightblue");
        gradient.addColorStop("1.0","lightpink");

        canContext.strokeStyle = gradient;
        canContext.lineWidth = 5;
        canContext.beginPath();
        canContext.moveTo(50,50);
        canContext.lineTo(250,50);
        canContext.lineTo(250,130);
        canContext.lineTo(50,130);
        canContext.lineTo(50,230);
        canContext.lineTo(250,230);
        canContext.stroke();
    </script>
</body>

canvas例子1

2.制作一个画板

<body>
    <div style="width: 500px; height: 50px; text-align: center; line-height: 50px; border: 3px dotted lightskyblue; box-sizing: border-box;">canvas画板</div>
    <canvas id="can" width="500px" height="500px" style="background-color: black; border: 5px solid dimgrey;"></canvas>
    <script>
        var oCan = document.querySelector("#can");
        var ctx = oCan.getContext("2d");

        var gradient =ctx.createLinearGradient(0,0,500,0);
        gradient.addColorStop("0","hotpink");
        gradient.addColorStop("0.25","lightsalmon");
        gradient.addColorStop("0.5","lightgreen");
        gradient.addColorStop("0.75","lightpink");
        gradient.addColorStop("1.0","lightskyblue");
        ctx.strokeStyle = gradient;

        oCan.onmousedown = function (event) {
            ctx.beginPath();
            ctx.moveTo(event.clientX,event.clientY-50);
            oCan.onmousemove = function (event) {
                ctx.lineTo(event.clientX,event.clientY-50); 
                ctx.stroke();
            }
        }
        oCan.onmouseup = function () {
            oCan.onmousemove = null;
        }
        
    </script>
</body>