首页 > 其他分享 >前端必知必会-HTMLCanvas图形

前端必知必会-HTMLCanvas图形

时间:2024-08-04 09:25:23浏览次数:14  
标签:示例 必知 ctx getElementById HTMLCanvas grd 必会 var 绘制

文章目录


HTML Canvas 图形

HTML <canvas> 元素用于在网页上绘制图形。

什么是 HTML Canvas?
HTML <canvas> 元素用于通过 JavaScript 动态绘制图形。

<canvas> 元素只是图形的容器。必须结合 JavaScript 才能实际绘制图形。

Canvas 有几种绘制路径、框、圆圈、文本和添加图像的方法。

所有主流浏览器都支持 Canvas。

Canvas 示例
画布是 HTML 页面上的矩形区域。默认情况下,画布没有边框,也没有内容。

标记如下所示:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意:始终指定 id 属性(将在脚本中引用)以及 width 和 height 属性来定义画布的大小。要添加边框,请使用 style 属性。

以下是基本的空画布示例:

示例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

效果

效果

添加 JavaScript

创建矩形画布区域后,必须添加 JavaScript 来进行绘制。

以下是一些示例:

绘制一条线

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

在这里插入图片描述

绘制一个圆圈

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

在这里插入图片描述

绘制一个文本

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

在这里插入图片描述

描边文本

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

在这里插入图片描述

绘制线性渐变

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

在这里插入图片描述

绘制圆形渐变

示例

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 用渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

在这里插入图片描述

绘制图像

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

总结

本文介绍了的HTMLCanvas图形使用,如有问题欢迎私信和评论

标签:示例,必知,ctx,getElementById,HTMLCanvas,grd,必会,var,绘制
From: https://blog.csdn.net/qq_24018193/article/details/140882149

相关文章

  • 前端必知必会-html svg
    文章目录HTMLSVG图形什么是SVG?`<svg>`元素SVG圆形SVG矩形具有不透明度和圆角的SVG矩形SVG星形SVG渐变椭圆和文本SVG和Canvas之间的区别SVG与Canvas的比较总结HTMLSVG图形SVG(可缩放矢量图形)SVG在XML中定义基于矢量图形,可直接嵌入HTML页面。......
  • 5分钟掌握软件测试必会mysql数据库知识(数据类型和数据约束
    mysql常用数据类型mysql的常用数据类型,主要有四种,需要我们重点掌握。1整型int整型分成两类,一类是有符号的,就是负数,一类是无符号的,就是正整数。很多时候我们需要的就是无符号的。比如年龄。2小数decimal小数的设置需要我们特别去了解一下。例如:decimal(4,2)这是表示......
  • 【机器学习】必会核函数之:高斯核函数
    高斯核函数1、引言2、高斯核函数2.1定义2.2核心原理2.3应用场景2.4代码示例3、总结1、引言在机器学习和数据科学领域,核方法(KernelMethods)(KernelMethods)(Kerne......
  • 【机器学习】必会核函数之:多项式核函数
    多项式核函数1、引言2、多项式核函数2.1定义2.2核心原理2.3实现步骤2.4应用场景2.5代码示例3、总结1、引言多项式核函数(PolynomialKernel)是一种用于机器学习,尤其是支持向量机(SVM)中的核函数。它通过计算输入数据的多项式变换,映射到一个更高维度的特征......
  • 【安全运营】网络安全人士必知的IOA、IOB、IOC指标
    网络安全中的指标(Indicators)是用于识别和量化潜在威胁、异常活动和恶意行为的信息或数据点。这些指标用于监测、检测和应对网络安全事件。在网络安全中,通常有三种关键类型的指标:攻击指标(IOA-IndicatorofAttack)、行为指标(IOB-IndicatorofBehavior)和攻陷指标(IOC-Indicator......
  • 黑龙江等保测评全解析:企业必知的安全合规秘籍
    随着数字化时代的到来,网络安全成为了企业运营中不可或缺的一环。黑龙江作为中国东北的重要省份,其企业面临着日益严峻的信息安全挑战。等保测评,即信息系统安全等级保护测评,成为企业合规运营的关键环节。本文将全面解析黑龙江等保测评的核心内容、流程与策略,帮助企业掌握安全合规......
  • NAS机友必知: 一个命令轻松搞定DockerHub被墙问题!
    最近因“不可控”之理由, DockerHub算是被全面封杀了,以前还只是污染了Web网站,现在连直接使用dockerpull都不能正常拉镜像了。如下,拉镜像一直卡在pulling阶段,重试数次后就会直接失败:这对于玩NAS的朋友来说是不可接受的(对于开发者来说简直是灾难,端午节没法过了),没了 Docker,NAS的可......
  • 《程序猿入职必会(2) · 搭建具备前端展示效果的 Vue》
    ......
  • 鼠标宏设置实现智能定时抢购,双11薅羊毛必会技能
    双11快到了,你还在手动定时间抢购商品吗?今天给大家介绍使用金舟鼠标连点器内的鼠标宏“找图”功能实现电脑定时自动购物技巧。通过设置抢购时间的变量和高匹配度的图片查找。轻松实现电脑自动点击“立即抢购”和“提交订单”功能。轻松抢购优惠的商品。鼠标宏设置教程......
  • LLM 大模型学习必知必会:大模型基础知识篇
    魔搭ModelScope开源的LLM模型魔搭ModelScope欢迎各个开源的LLM模型在社区上做开源分享。目前社区上已经承载了来自各个机构贡献的不同系列的LLM模型。并且社区的开发者也在这些模型的基础上,贡献了许多创新应用,并在ModelScope的创空间上进行分享。本专题初步梳......