canvas入门/基础语法

最新推荐文章于 2023-02-08 01:45:15 发布
最新推荐文章于 2023-02-08 01:45:15 发布
阅读量405 收藏
点赞数
文章标签： webgl 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53058401/article/details/128705218
版权

canvas入门

1. canvas是什么

Canvas 中文名叫 “画布”，是 HTML5 新增的一个标签。

Canvas 允许开发者通过 JS在这个标签上绘制各种图案。

Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

Canvas 在某些情况下可以 “代替” 图片。

Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。

2. 使用canvas绘制图形的步骤

​ a. 在html中创建canvas元素

​ b. 通过js获取canvas标签

​ c. 从canvas标签获取到绘图工具

​ d. 通过绘图工具，在canvas标签上绘制图行

<canvas id="cvs"></canvas> // 步骤a

<script>
    let cvs = document.getElementById('cvs') // 步骤b
    let ctx = cvs.getContext('2d'); // 步骤c
    <!-- 步骤d -->
    ctx.moveTo(100, 100); // 起点坐标
    ctx.lineTo(200, 100); // 下一个点的坐标
    ctx.stroke(); // 将所有坐标用一条线连起来
</script>

**注意：**canvas有默认宽高300px*150px，不能使用css设置canvas宽高，否则内容会被拉伸（canvas提供了width height两个属性设置宽高）

3. 坐标系

与数学中的坐标系y轴相反（y轴正方向向下，原点在浏览器的左上角）

4. 线

线条的默认宽度是 1px，默认颜色是黑色（但由于默认情况下 canvas 会将线条的中心点和像素的底部对齐，所以会导致显示效果是 2px和非纯黑色问题）

  • lineWidth: 线的粗细

  • strokeStyle: 线的颜色

  • lineCap: 线帽,线两端的形状设置了该值线条会稍长一点（默认：butt; 圆形: round；方形: square）

  • lineJoin: 拐角样式（默认值：miter尖角；round：圆角；bevel：斜角）

  • setLineDash(): 将线条变为虚线，需传入一个数值类型的数组（数组只有一个元素：实线与空白都是该值； 数组有两个元素：实线是元素一，虚线是元素二）

  • lineDashOffset(): 设置虚线起始偏移量

  • beginPath(): 新开路径;

    ​ 在绘制多条线段且样式不同时需要开辟新路径，否则各个线条样式之间会相互污染；

    ​ 使用beginPath()方法重新开一个路径，并设置新线段的样式（必须）；

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');
ctx.moveTo(100, 50);
ctx.lineTo(290, 50);
ctx.stroke();

ctx.moveTo(100, 80.5);
ctx.lineTo(290, 80.5);
ctx.stroke();

// 虚线
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(290, 100);
ctx.setLineDash([10])
ctx.stroke();

在这里插入图片描述

5. 矩形

可以使用前面的线段绘制矩形，canvas也提供了rect()方法直接生成矩形。

// 线段方式
let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.lineTo(100, 100); // 需要再设置一次起点坐标进行闭合 或者推荐使用closePath()方法
ctx.stroke();

rect()方法：参数一、二分别对应起点（左上角）坐标X、Y的值，参数三、四表示矩形的宽高

// rect(x, y, width, height)
ctx.rect(150, 50, 50, 99);
ctx.stroke();

strokeRect()； 描边矩形；（用法、参数都同rect()）

fillRect(); 填充矩形；

clearRect(); 清空指定区域（使用 ctx.clearRect(0, 0, cvs.width, cvs.height) 可以清空整个canvas）；

6. 多边形

绘制多边形需要结合使用moveTo()、 lineTo()、 closePath()；

7. 圆形（弧线）

绘制圆形的方法是arc(); （ 绘制曲线bezierCurveTo() ）

arc(x, y, r, sAngle, eAngle，counterclockwise)
// x, y 是圆心坐标
// sAngle, eAngle是开始角度 结束角度（以弧度为单位。例如 180°就写成 Math.PI ，360°写成 Math.PI * 2 ）
// counterclockwise 绘制方向，默认false(true: 逆时针，false: 顺时针)

注意: 绘制圆形之前必须先调用beginPath()方法；绘制完之后还需调用closePath()方法；

let cvs = document.getElementById('cvs')
let ctx = cvs.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180, false);
ctx.closePath(); // 不调用closePath()就可以绘制弧线
ctx.stroke();

在这里插入图片描述

8. 文本

可设置文本样式、描边、填充、对齐方式等

样式：font

cxt.font = 'font-style font-variant font-weight font-size/line-height font-family'

描边：strokeText()

/** 
text: 要描边的文本
x: 横坐标，文本左边要对齐的坐标
y: 纵坐标， 文本底部要对齐的坐标
maxWidth: 可选，文本最大渲染宽度，超出文本会被压缩
**/
strokeText(text, x, y, maxWidth)

填充：fillText() 语法同描边

<canvas id="canvas"></canvas>
<script>
let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d'); // 获取webgl上下文
ctx.font = '40px Arial'
ctx.strokeStyle = 'red' // 设置描边颜色
ctx.strokeText('hello', 100, 100)

ctx.fillStyle = 'black' // 设置填充颜色
ctx.fillText('hello', 100, 100)

</script>

在这里插入图片描述

计算文本宽度：measureText(text)

ctx.measureText('hello world!').width
9. 图片

可用于渲染图片、设置图片宽高、截取图片等

渲染图片：

语法： 
// image: 图片对象 
// ltx: 图片左上角的横坐标位置
// lty: 图片左上角的纵坐标位置
drawImage(image, ltx, lty)  

<canvas id="canvas" width="1500" height="1500"></canvas>
<script>
    let cvs = document.getElementById('canvas')
    let ctx = cvs.getContext('2d'); // 获取webgl上下文

    const image = new Image(); // 1. 创建image对象
    image.src = './微信图片_20220620163205.png'； // 2. 引入图片
    image.onload = () => { // 3. 加载图片
    	ctx.drawImage(image, 100, 100); // 使用drawImage()方法渲染
	}
</script>

设置图片宽高：只需加多两个参数~

drawImage(image, ltx, lty, w, h); // w h分别表示图片宽高

**截取图片：**参数多了， 顺序也变了

// sx, sy, sw, sh分别表示： 开始截取的横坐标、纵坐标，截取的宽高
drawImage(image, sx, sy, sw, sh, ltx, lty, w, h)
ctx.drawImage(image, 50, 300, 300, 300, 200, 200, 200, 200);

在这里插入图片描述在这里插入图片描述

10. 渐变：

线性渐变： createLinearGradient(x1, y1, x2, y2)

放射渐变： createRadialGradient(x1, y1, r1, x2, y2, r2)

创建线性渐变的步骤：

​ a. 使用 createLinearGradient() 方法创建一个指定了开始和结束点（两点确定一条直线）的 CanvasGradient 对象；

​ b. 使用 CanvasGradient 对象上的 addColorStop()方法添加起始色标；

​ c. 把 CanvasGradient 对象赋值给strokeStyle 或 fillStyle属性；

let cvs = document.getElementById('canvas')
let ctx = cvs.getContext('2d'); // 获取canvas 平面 上下文

var gradient = ctx.createLinearGradient(0,0,200,0); // 步骤a
gradient.addColorStop(0,"green"); // 步骤b
gradient.addColorStop(1,"blue");
ctx.fillStyle = gradient; // 步骤c
ctx.fillRect(10,10,200,100);

以上只是canvas的一些基础语法，还有投影、滤镜等高级玩法；

更多详细语法请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

HuaHua·Li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序canvas画布实现画笔自由绘制
01-09
微信小程序canvas画布实现画笔自由绘制
HTML5 canvas 基本语法
09-28
HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。
HTML 5 canvas —— 基本语法
Mr. David 专栏
09-29 1162
目录简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 ca
canvas基础语法
weixin_34342992的博客
08-23 120
前面的话 　　canvas顾名思义是定义在浏览器中的画布。它不仅是一个普通的元素，更是一个强大的编程工具。它的出现已然超过了web基于文档的设计初衷，将网页这一形态的应用推向了另一个高度。利用canvas，可以开发出复杂的动画、动态图表、游戏等。关于canvas，有这样一句话——canvas就像是一场文艺复兴，将编程工作者彻底释放出创造力。本文将详细介绍canvas基础知识   添加canv...
Canvas基础语法
Insist_bin的博客
05-11 622
1.1 什么是Canvascanvas是HTML5提供的一个用于展示绘图效果的标签，canvas原意画布，帆布，在HTML5页面中用于展示绘图效果，最早canvas是苹果提出来的一个方案，今天已经在大多数浏览器实现了1.1.1 canvas的基本用法基本语法&lt;canvas&gt;&lt;/canvas&gt;使用canvas标签，即可在页面中开辟一格区域，可以设置其width和height设...
canvas基本语法
人生就像蒲公英，看似自由，却是身不由已——《渡》
12-08 763
canvas创建<canvas id="mycanvas" width="280px" height="190px" style="border: 1px solid royalblue;"></canvas> $(function(){ var cnv = document.getElementById("mycanvas"); var cxt = cnv.getC
canvas基本语法及实例
zhangxiang_1102的博客
02-26 962
canvas &lt; canvas&gt;标签其实就相当于一个容器，一个可以展示绘图内容的画板。我们需要通过 js 脚本往里面绘制图形。Canvas 只能展示绘图的内容， 但是不能进行绘图。最早是 苹果公司 提出的该标签。(游戏 、可视化数据(图表)、banner 广告） 1） 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸...
Canvas基本语法(1)
qq_44381874的博客
08-06 162
Canvas 1.基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function draw(){ var one = document.getElementById('one'); if(one.getContext){ var one1 = one.get
2015最新Android基础入门教程PDF版打包合集
11-01
这个"2015最新Android基础入门教程PDF版打包合集"是为初学者准备的宝贵资源，旨在帮助他们快速掌握Android应用开发的基本概念和技术。以下是这个教程合集中可能包含的一些关键知识点： 1. **Android简介**：首先，...
HTML入门基础学习总结
04-03
本篇文章将深入浅出地探讨HTML入门基础，帮助初学者快速掌握这一核心技能。 首先，了解HTML的基本结构至关重要。一个基本的HTML文档由三部分组成：文档声明、头部（head）和主体（body）。文档声明如`<!DOCTYPE ...
第11条-Android动画/图形入门指南
04-08
了解基本的Java语法和面向对象编程概念是开发Android应用的基础。 2. **OpenGL**: OpenGL（Open Graphics Library）是一种跨语言、跨平台的应用程序编程接口（API），用于渲染2D和3D图形。在Android中，OpenGL ES...
html入门代码.rar
最新发布
05-20
这个“html入门代码.rar”压缩包显然包含了一些基本的HTML学习资料，比如“html.docx”文档，很可能是对HTML语法和实践应用的介绍。 HTML的工作原理是通过一系列标签来组织和格式化网页内容。例如，`<html>`标签...
《Qt5编程入门》笔记1
08-08
接下来的章节将逐步深入Qt5的各个方面，包括将Qt4代码迁移到Qt5的实际操作，Qt Quick的使用，QML的语法学习，Quick基础，控件和对话框的运用，图形动画的基础知识，图形效果的创建，粒子系统的构建，canvas的使用，...
HTML 5 从入门到精通
08-18
本教程《HTML 5 从入门到精通》旨在帮助初学者快速掌握HTML5的基本概念、语法以及高级特性，并通过实践应用提升技能。 一、HTML5基础 HTML5的基础部分包括文档类型声明、基本元素结构以及语义化标签的使用。与HTML4...
学习html入门
12-24
它是互联网的基础，让网页具备了展示文字、图像、视频等信息的能力。学习HTML入门，首先要理解其基本结构和语法。 HTML由两大部分构成：头部（Head）和主体（Body）。头部不直接显示在页面上，但包含了许多对网页...
Canvas 绘图使用语法
zaxheartless的专栏
07-05 2052
Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。 在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
前端之学习 canvas 的基础语法
weixin_53817560的博客
02-08 651
前端之学习 canvas 的基础语法 前言 今天，学习了 canvas 的一些语法知识和使用，在这里分享给大家一起学习交流 首先，我们应该了解 canvas 是什么，有什么用，文章最后，我们将使用 canvas 绘制一个刮刮卡的中奖特效！ 什么是 canvas 定义：是 HTML5 提供的一种新标签, ie9 才开始支持的，Canvas 是一个矩形区域的画布，可以用 JS 控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘
Canvas常用语法详解
SeekerTime
04-19 946
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。 一、标签原型<canvas width="1000" height="1000" id="demo"> 您的浏览器版本太低，不支持HTML5新增的canvas标签！ </canvas> 使用js获取画布，并指定对象<script> var demo = document.getElementById
vue canvas入门
09-08
嗨！欢迎来到 Vue Canvas 入门。Vue 是一个流行的 JavaScript 框架，而 Canvas 是一个 HTML5 元素，用于在网页上绘制图形。结合 Vue 和 Canvas，你可以创建动态的图形和交互性应用程序。下面是一个简单的入门示例。 首先，确保你已经安装了 Vue。你可以使用 Vue CLI 来创建一个新的 Vue 项目。 ```shell npm install -g @vue/cli vue create vue-canvas-demo cd vue-canvas-demo npm run serve ``` 接下来，我们将在 Vue 组件中创建一个 Canvas 元素。在 `src/components/Canvas.vue` 文件中添加以下代码： ```html <template> <canvas ref="canvas"></canvas> </template> <script> export default { mounted() { this.draw(); }, methods: { draw() { const canvas = this.$refs.canvas; const ctx = canvas.getContext('2d'); // 在画布上绘制一个矩形 ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 100, 100); } } }; </script> ``` 这是一个简单的 Vue 组件，它在页面上创建了一个红色的矩形。我们使用 `mounted` 钩子来在组件加载后调用 `draw` 方法。在 `draw` 方法中，我们获取 Canvas 元素的引用并获取 2D 上下文对象 (`ctx`)，然后使用 `fillRect` 方法绘制一个红色的矩形。 最后，在 `src/App.vue` 文件中引入并使用我们刚刚创建的 Canvas 组件： ```html <template> <div id="app"> <Canvas /> </div> </template> <script> import Canvas from './components/Canvas.vue'; export default { components: { Canvas } }; </script> ``` 现在，可以启动开发服务器并在浏览器中查看效果： ```shell npm run serve ``` 这只是一个简单的入门示例，你可以根据需要在 Canvas 中绘制更复杂的图形和添加交互性。希望对你有所帮助！如果你有任何问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值