Canvas 教程（一）

目录

一、初体验

二、通过js的方式创建canvas

三、为什么推荐属性的方式设置canvas的宽高？

四、常见画笔API

4.1 画直线

🔶 步骤

🫢 小练习

4.2 线条的样式

4.2.1 线条的宽度设置

🔶 API

4.2.2 线条的颜色设置

🔶 API

🔶 步骤

一、初体验

使用canvas的基本步骤

  1. 创建canvas元素，并使用宽度和高度属性设置canvas的大小
  2. 获取 画笔 对象
  3. 使用canvas提供的api进行绘画
<!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 style="background-color: aliceblue;">
        <!-- canvas的默认大小：300 x 150  -->
    </canvas>

</body>
</html>

可以看到：canvas有一个默认的大小 300 x 150 px

❗ 有博主说：canvas和别的元素不太一样，需要使用属性的方式设置宽和高，不然会有问题。

这个情况我暂时还没发现有什么问题，两种方式试了一下都能展示，有问题后面再说。(见第三章)

<canvas style="background-color: orange;width: 50px;height: 50px;">

</canvas>

<canvas style="background-color: pink;"
        width="50"
        height="50">
</canvas>

接下来，我们画一个方形看看，直接给代码进行演示

    <canvas id="canvas"
            style="border: 1px solid grey;"
            width="500"
            height="500">
        <!-- canvas的默认大小：300 x 150  -->
    </canvas>

    <script>
        // 1. 获取 canvas 画布标签
        const canvas = document.getElementById('canvas')
        // 2. 获取 context 画笔对象
        const context = canvas.getContext('2d')
        // 3. 画出自己想要的图像
        // 画一个方形： 有专门的api -> fillRect(x,y, width, height)
        // x、y： 表示左上角顶点的坐标
        // width、height： 表示这个方形的宽度和高度
        context.fillRect(100, 100, 50, 50)

    </script>

ok，这里我们得到canvas画笔的第一个api：

画方形 API

CanvasRect.fillRect(x: number, y: number, w: number, h: number): void

x、y： 表示左上角顶点的坐标

w、h： 表示这个方形的宽度和高度

二、通过js的方式创建canvas

前面演示的方式获取到的仅仅是html元素，现在这种方式 js 能够识别到这是canvas元素。这样就能给出相应的api提示了。比较方便！

<body>
    <!-- 这种方式js能够识别到这是canvas元素，前面演示的方式获取到的仅仅是html元素 -->
    <script>
        //  1. 创建 canvas 画布
        const canvas = document.createElement('canvas')
        //  2. 设置宽高
        canvas.width = 400
        canvas.height = 600
        canvas.style = "border:1px solid green"
        //  3. 将该画布放入body标签中
        document.body.append(canvas);

        //  4. 继续获取画笔
        const context = canvas.getContext('2d')
        //  5. 画出想要的图形
        context.fillRect(70, 70, 100, 100)
    </script>
</body>

三、为什么推荐属性的方式设置canvas的宽高？

我们直接上代码演示进行对比

<!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>
    <script>
        const canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 200
        canvas.style="border:1px solid grey"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        context.fillRect(200, 0, 200, 100)
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <script>
        const canvas = document.createElement('canvas')
        // canvas.width = 400
        // canvas.height = 200
        canvas.style="border:1px solid grey"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        context.fillRect(200, 0, 200, 100)
    </script>
</body>
</html>

很明显，通过样式修改的宽高尺寸已经严重扭曲。所以，必须使用属性的方式修改宽高!

四、常见画笔API

4.1 画直线

🔶 步骤

1. 使用 moveTo 方法把画笔移动到直线的起点

2. 使用 lineTo 方法把画笔移动到直线的终点

3. 使用 stoke 方法让画笔绘制一条直线

    <script>
        const canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 200
        canvas.style="border:1px solid grey; background-color: green"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        // 画直线
        //   画笔移动到 (起点)
        context.moveTo(100, 100)
        //   画笔画线到 (终点)
        context.lineTo(300, 100)
        //   调用画线的方法
        context.stroke()
    </script>

🫢 小练习

请画出如下所示的折线图？

<script>
        const canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 200
        canvas.style="border:1px solid grey;background-color:green;"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        context.moveTo(50, 150)
        context.lineTo(100, 20)
        context.stroke()
        context.moveTo(100, 20)
        context.lineTo(150, 100)
        context.stroke()
        context.moveTo(150, 100)
        context.lineTo(200, 50)
        context.stroke()
        context.moveTo(200, 50)
        context.lineTo(300, 150)
        context.stroke()
</script>


<!-- 直接写成这样 -->
<script>
        const canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 200
        canvas.style="border:1px solid grey;background-color:green;"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        context.moveTo(50, 150)
        context.lineTo(100, 20)
        context.lineTo(150, 100)
        context.lineTo(200, 50)
        context.lineTo(300, 150)
        context.stroke()
</script>

4.2 线条的样式

4.2.1 线条的宽度设置

🔶 API

lineWidth 

const context = canvas.getContext('2d')
context.moveTo(20,20)
context.lineTo(380,20)
// 设置线条的宽度
context.lineWidth = 10
context.stroke()

4.2.2 线条的颜色设置

（1）API

strokeStyle

const context = canvas.getContext('2d')
context.moveTo(20,20)
context.lineTo(380,20)
// 设置线条的宽度
context.lineWidth = 10
// 修改线条的颜色
context.strokeStyle = 'orange'
context.stroke()

除了设置纯色线条，我们也可以设置渐变色。

（2）线性渐变色  步骤

1. 通过画笔对象，创建线性渐变对象createLinearGradient

2. 拿到渐变对象，设置渐变的起止颜色，addColorStop

3. 再通过 strokeStyle 将这个渐变对象赋值给它

<script>
        const canvas = document.createElement('canvas')
        canvas.width = 400
        canvas.height = 200
        canvas.style="border:1px solid grey;"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        // 1. 创建线性渐变(左上角横，纵坐标 ，宽， 长)
        const gradient = context.createLinearGradient(0, 0, 400, 200)
        // 2. 从什么颜色开始渐变 （偏移量（0~1，表示从什么位置开始渐变）， 颜色）
        gradient.addColorStop(0, 'red')
        gradient.addColorStop(1, 'blue')
        // 3. 画线
        context.moveTo(20, 20)
        context.lineTo(380, 20)
        context.lineWidth = 20
        context.strokeStyle = gradient;
        context.stroke()
</script>

gradient.addColorStop(0, 'red')
gradient.addColorStop(0.5, 'pink')
gradient.addColorStop(1, 'blue')

（3）径向渐变

createRadialGradient

<script>
        const canvas = document.createElement('canvas')
        canvas.width = 600
        canvas.height = 400
        canvas.style="border:1px solid grey;"
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        
        // 1. 创建径向渐变对象
        // 六个参数
        // 1 2 3 param: 第一个圆的中心点坐标 半径
        // 4 5 6 param: 第二个圆的中心点坐标 半径
        const gradient = context.createRadialGradient(100,100, 0, 100, 100, 100)
        // 2. 设置起点和终点的颜色
        gradient.addColorStop(0, 'orange')
        gradient.addColorStop(1, 'red')
        // 3. 把渐变赋给画笔
        context.fillStyle = gradient;
        context.fillRect(0,0,200, 200)
</script>

（4）锥形渐变
<script>
        const canvas = document.createElement('canvas')
        canvas.width = 600
        canvas.height = 400
        canvas.style = 'border: 1px solid grey'
        document.body.append(canvas)
        const context = canvas.getContext('2d')
        // 创建锥形渐变对象
        // 参数说明：
        // 1   param: 是一个弧度值，如果要以角度来计算，需要转换一下()
        // 2 3 param: 圆心坐标
        const gradient = context.createConicGradient(0, 100, 100)
        // 设置渐变颜色
        gradient.addColorStop(0, 'skyblue')
        gradient.addColorStop(1, 'red')
        // 填充样式
        context.fillStyle = gradient

        // 绘制矩形
        context.fillRect(0, 0, 200, 200)
</script>

 

// 创建锥形渐变对象
// 参数说明：
// 1   param: 是一个弧度值，如果要以角度来计算，需要转换一下()
// 2 3 param: 圆心坐标
const gradient = context.createConicGradient(45 * (Math.PI / 180), 100, 100)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/907512.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[CISCN 2019华北]PWN1-好久不见7

[CISCN 2019华北]PWN1-好久不见7

Partial RELRO 表示部分 RELRO 保护已启用。在这种情况下&#xff0c;只有某些部分&#xff08;如 GOT 中的只读部分&#xff09;是只读的。 NX enabled 表示这个二进制文件启用了 NX 保护&#xff0c;数据段是不可执行的。这可以防止某些类型的代码注入攻击。 这里是ida识别…
阅读更多...
Leetcode 64. 最小路径和 动态规划+空间优化

Leetcode 64. 最小路径和 动态规划+空间优化

原题链接&#xff1a;Leetcode 64. 最小路径和 二维数据 class Solution { public:int minPathSum(vector<vector<int>>& grid) {int m grid.size();int n grid[0].size();int dp[m][n];dp[0][0] grid[0][0];for (int j 1; j < n; j)dp[0][j] dp[0][…
阅读更多...
教你一个免费把PDF产品宣传册转化为翻页电子产品宣传册的方法

教你一个免费把PDF产品宣传册转化为翻页电子产品宣传册的方法

在这个数字化时代&#xff0c;电子宣传册已经成为企业推广产品的重要手段。相比于传统的纸质宣传册&#xff0c;电子宣传册具有更高的互动性和传播效率。那么&#xff0c;如何将现有的PDF产品宣传册转化为具有翻页效果的电子宣传册呢&#xff1f;本文将为您详细介绍一种免费的方…
阅读更多...
大数阶乘求末尾0的个数

大数阶乘求末尾0的个数

题目&#xff1a;求123…n所得数的末尾有多少个0&#xff1f;n由键盘输入&#xff0c;且1000<n<10000。 答&#xff1a;思路1&#xff1a;考虑末尾0的来源。阶乘结果末尾的零是由于因数10的存在&#xff0c;10分解质因数&#xff1a;25。在阶乘的计算中&#xff0c;偶数&…
阅读更多...
2024最新的开源博客系统：vue3.x+SpringBoot 3.x 前后端分离

2024最新的开源博客系统：vue3.x+SpringBoot 3.x 前后端分离

本文转载自&#xff1a;https://fangcaicoding.cn/article/54 大家好&#xff01;我是方才&#xff0c;目前是8人后端研发团队的负责人&#xff0c;拥有6年后端经验&3年团队管理经验&#xff0c;截止目前面试过近200位候选人&#xff0c;主导过单表上10亿、累计上100亿数据…
阅读更多...
鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时&#xff0c;开发者可能会遇到多方面的挑战&#xff0c;这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析&#xff1a; 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…
阅读更多...
JavaScript的迭代器和生成器

JavaScript的迭代器和生成器

1. 迭代器Iterator 1. 基本概念 JavaScript 表示集合的对象大致有Object&#xff0c;Array&#xff0c;Map&#xff0c;Set四种&#xff0c;并且这四种类型的数据之间可以相互以成员嵌套&#xff08;如Array的成员可以是Object&#xff0c;而Map又可以嵌入Object的成员中&am…
阅读更多...
深度学习常用开源数据集介绍【持续更新】

深度学习常用开源数据集介绍【持续更新】

DIV2K 介绍&#xff1a;DIV2K是一个专为 图像超分辨率&#xff08;SR&#xff09; 任务设计的高质量数据集&#xff0c;广泛应用于计算机视觉领域的研究和开发。它包含800张高分辨率&#xff08;HR&#xff09;训练图像和100张高分辨率验证图像&#xff0c;每张图像都具有极高…
阅读更多...
Pinia-状态管理

Pinia-状态管理

Pinia-状态管理 特点&#xff1a; 1. 轻量和模块化 Pinia 是一个轻量级的状态管理库&#xff0c;支持模块化管理&#xff0c;即可以将应用的状态分成多个 store 以实现更好的组织。使用 Pinia&#xff0c;可以定义多个 store&#xff0c;每个 store 都是一个独立的模块&#x…
阅读更多...
向量模型Jina Embedding: 从v1到v3论文笔记

向量模型Jina Embedding: 从v1到v3论文笔记

文章目录 Jina Embedding: 从v1到v3Jina Embedding v1数据集准备训练过程 Jina Embedding v2预训练修改版BERT在文本对上微调在Hard Negatives上微调 Jina Embedding v2 双语言预训练修改版BERT在文本对上微调用多任务目标微调 Jina Embedding v3预训练在文本对上微调训练任务相…
阅读更多...
修改HarmonyOS鸿蒙图标和名字，打包后安装到真机，应用图标丢失变成透明，修改名字也不生效，还是默认的labeL解决方案教程

修改HarmonyOS鸿蒙图标和名字，打包后安装到真机，应用图标丢失变成透明，修改名字也不生效，还是默认的labeL解决方案教程

HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标&#xff0c;用hdc安装到真机&#xff0c;打包后应用图标丢失变成透明&#xff0c;名字也还是默认的label的bug&#xff0c;以下是解决方案 以下是修改方案&#xff1a; 1、修改应用名字&#xff1a; 2、修改应用图标&#xff1a…
阅读更多...
3个模型的交互式多模型IMM，基于EKF的目标跟踪实例（附MATLAB代码）

3个模型的交互式多模型IMM，基于EKF的目标跟踪实例（附MATLAB代码）

文章目录 3个模型的IMM源代码运行结果代码介绍总结 3个模型的IMM 代码实现了基于 I M M IMM IMM&#xff08;Interacting Multiple Model&#xff09;算法的目标跟踪。它使用三种不同的运动模型&#xff08;匀速直线运动、左转弯和右转弯&#xff09;来预测目标的位置&#x…
阅读更多...
Webservice 客户端 生成代码 cxf方式 jdk方式 wsdl保存到本地后，生成客户端代码

Webservice 客户端 生成代码 cxf方式 jdk方式 wsdl保存到本地后，生成客户端代码

详解视频&#xff0c;如果看不懂图片&#xff0c;请看这个视频 客户端三种方式 jdk cxf 客户单 wsdl保存到本地后&#xff0c;生成客户端代码
阅读更多...
轮廓图【HTML+CSS+JavaScript】

轮廓图【HTML+CSS+JavaScript】

给大家分享一个很好看的轮播图&#xff0c;这个也是之前看到别人写的效果感觉很好看&#xff0c;所以后面也自己实现了一下&#xff0c;在这里分享给大家&#xff0c;希望大家也可以有所收获 轮播图效果&#xff1a; 视频效果有点浑浊&#xff0c;大家凑合着看&#xff0c;大家…
阅读更多...
Windows上安装Redis

Windows上安装Redis

1.下载Redis 下载有2中选择&#xff1a; 官方redis官方下载地址&#xff1a; https://redis.io/download&#xff0c; 选择适合Windows的版本下载。 redis 64位下载地址&#xff1a; https://github.com/ServiceStack/rediswindows/tree/master/downloads&#xff0c; 我们下…
阅读更多...
计算机视觉实验一：图像基础处理

计算机视觉实验一：图像基础处理

1. 图像的直方图均衡 1.1 实验目的与要求 (1)理解直方图均衡的原理与作用; (2)掌握统计图像直方图的方法; (3)掌握图像直方图均衡的方法。 1.2 实验原理及知识点 直方图均衡化是通过灰度变换将一幅图象转换为另一幅均衡直方图&#xff0c;即在每个灰度级上都具有相同的象素…
阅读更多...
第8章 利用CSS制作导航菜单作业

第8章 利用CSS制作导航菜单作业

1.利用CSS技术&#xff0c;结合链接和列表&#xff0c;设计并实现“山水之间”页面。 浏览效果如下&#xff1a; HTML代码如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>山水之间</title><…
阅读更多...
dhcp池没有空闲ip导致手机无法获得ip

dhcp池没有空闲ip导致手机无法获得ip

得到用户反馈&#xff0c;一个高速项目部的wifi无法接入&#xff0c;让排查原因。 反馈有的手机能接入&#xff0c;有的接入不了。查看ac界面发现有个终端获得的ip是169.254.xxx.xxx。 ip地址是169.254.96.17显然是手机打开wlan开关后&#xff0c;鉴权通过后dhcp过程&#xff0…
阅读更多...
AJAX和JSON

AJAX和JSON

一.AJAX技术 1.1 AJAX介绍 Ajax 即“Asynchronous Javascript And XML”&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建 交互式、快速动态应用的网页开发技术&#xff0c;无需重新加载整个网 页的情况下&#xff0c;能够更新页面局部数据的技术。 通…
阅读更多...
c++包装器/适配器 function--通俗易懂

c++包装器/适配器 function--通俗易懂

1.为什么要有function 在下面的场景下 useF类模版要实例化出三份&#xff0c;影响效率 仿函数:c仿函数--通俗易懂-CSDN博客 lambda表达式&#xff1a;c lambda表达式--通俗易懂-CSDN博客 template<class F, class T> T useF(F f, T x) {static int count 0;cout <…
阅读更多...
最新文章

Copyright @ 2022~2023