前端Canvas入门——怎么用Canvas画一些简单的图案

Canvas作为前端的画图工具,其实用途还是蛮广泛的,但是很多前端学习课程其实都很少涉及到这块内容。

于是乎,就写下这个了。

当然啦,目前还在学习摸索中。

一些实战代码,仅供参考:

    <canvasid="ctx"width="300px"height="300px"style="border: 1px solid;margin: 100px 0 0 666px;"><!-- border不起效果,不能直接使用border,而是用style去写,个人不建议使用这个border。默认宽高是300*150px--></canvas><script>// 通过id去获取canvas,这里不需要#const myCtx = document.getElementById('ctx')// 通过getContext()方法创建2d平面const ctx = myCtx.getContext("2d")// --------------------------------------------// 要求:画一个矩形// ctx.rect(100, 100, 100, 100)// 前面两个是起始的坐标位置,后面两个是宽高// 改变笔头// ctx.strokeStyle = "red"// 设置画笔的像素值// ctx.lineWidth = 3// 使用stroke()是画出形状,不会填充// ctx.stroke()// 使用fill是填充的意思// ctx.fill()// --------------------------------------------// 使用简单方法画矩形// 改变笔头// ctx.strokeStyle = "red"// 使用strokeRect()画出// ctx.strokeRect(125, 125, 50, 50)// 使用fillStyle,改变画笔颜色// ctx.fillStyle = "red"// 使用fillRect()填充// ctx.fillRect(100, 100, 100, 100)// 使用clearRect()清空// ctx.clearRect(125, 125, 50, 50)// -------------------------------------// 画一个三角形// 移动笔尖// ctx.moveTo(30, 40)// 先画出一条横线// ctx.lineTo(270, 40)// 再画出一条竖线// ctx.lineTo(270, 260)// 回到起点,闭合整个曲线// ctx.closePath()// -------------------------------------// 画一个圆形// 最后结束角不能是0,圆形必须是2*Math.PI// 还有个参数的——关于画的方向的,但是默认是顺时针,这里使用默认效果。// 从X轴开始出发,X轴算是0°// ctx.arc(150, 150, 50, 0, 2 * Math.PI)// 改变颜色// ctx.strokeStyle = "blue"// 完成绘图// ctx.stroke()// 改变填充颜色// ctx.fillStyle = "red"// 完成绘图// ctx.fill()// -------------------------------------// 画一个椭圆 - 不闭合的ctx.arc(150, 150, 88, 0, 1.8*Math.PI)// 改变画笔颜色// ctx.strokeStyle = "orange"// 完成绘图// ctx.stroke()// 改变填充颜色// ctx.fillStyle = "green"// 完成绘图 - 有bug - 并不是椭圆,而是被切了一小块的圆// ctx.fill()// 完善 - 闭合图案// 笔尖回到圆点// ctx.lineTo(150, 150)// 两段闭合// ctx.closePath()// 填充// ctx.fill()// -----------------------------------// 画一个圆ctx.arc(150, 150, 100, 0, 1.6 * Math.PI)// 要求:渐变色的椭圆形// 设置线性渐变色// const gradient = ctx.createLinearGradient(200, 200, 50, 50)// 设置放射状渐变色 - 在起始和结尾坐标处添加了半径const gradient = ctx.createRadialGradient(180, 180, 100, 75, 75, 100)// 添加颜色 - 注意前面的数字和后面的颜色gradient.addColorStop(0, "black")gradient.addColorStop("0.5", "#999")gradient.addColorStop("0.8", "red")gradient.addColorStop(1, "blue")// 直接填充ctx.fillStyle = gradient// 笔尖回到圆点ctx.lineTo(150, 150)// 两段闭合ctx.closePath()// 完成绘图ctx.fill()

注意最后一个椭圆的闭合的实现:

闭合前:

闭合后:

 


增加了渐变色的处理。

线性渐变和放射状渐变方法差不多,只不过创建函数有所区别。

其中放射状渐变需要注意的是,半径最好跟圆的半径一致,否则就会出现:

本节完。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EtherCAT总线冗余让制造更安全更可靠更智能

冗余定义 什么是总线冗余功能&#xff1f;我们都知道&#xff0c;EtherCAT现场总线具有灵活的拓扑结构&#xff0c;设备间支持线型、星型、树型的连接方式&#xff0c;其中线型结构简单、传输效率高&#xff0c;大多数的现场应用中也是使用这种连接方式&#xff0c;如下图所示…

【Qt课设】基于Qt实现的中国象棋

一、摘 要 本报告讨论了中国象棋程序设计的关键技术和方法。首先介绍了中国象棋的棋盘制作&#xff0c;利用Qt中的一些绘画类的函数来进行绘制。在创作中国象棋棋子方面&#xff0c;首先&#xff0c;我们先定义一下棋子类&#xff0c;将棋子中相同的部分进行打包&#xff0c;使…

idea推送到gitee 401错误

在idea上推送时遇到这样的问题&#xff0c;解决方法如下&#xff1a; 在https://的后面加上 用户名:密码 然后再提交就ok啦&#xff01;

三、SpringMVC

三、SpringMVC 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器来划分 M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据 JavaBean分为两类&#xff1a; 一类称为实体…

代码随想录-Day55

42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高…

CentOS7二进制安装和YUM安装mongodb,服务器无法安装5.0以上的 mongodb 数据库报错 Illegal instruction

文章目录 MongoDB 安装二进制安装YUM 安装 Tips:1、MongoDB安装问题2、MongoDB登录3、MongoDB排序时内存大小限制和创建索引4、创建用户5、Java yaml使用密码连接mongodb6、MongoDB增删改查 MongoDB 安装 二进制安装 [rootmysql5-7 mongodb-6.0.4]# cat start.sh #!/bin/bash…

js使用proxy代理监听控制事件

本文为proxy代理的实例应用&#xff0c;有关代理的内容可以参考&#xff1a; js语法---理解反射Reflect对象和代理Proxy对象 监听事件 要监听dom元素的事件&#xff0c;我们会采用回调触发的方式来执行操作&#xff0c; 而触发事件的过程很明显是一个异步操作&#xff0c;异…

Docker 使用基础(1)—镜像仓库

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;秒針を噛む—ずっと真夜中でいいのに。 0:34━━━━━━️&#x1f49f;──────── 4:20 &#x1f504; ◀️ ⏸ …

android13 固定U盘链接 SD卡链接 TF卡链接 硬盘链接

1.前言 有些客户使用的应用并不带有自动监听U盘 sd卡广播的代码,使用的代码是固定的地址,这样的话,就需要我们将系统的挂载目录固定了。 原始路径 /storage/3123-19FA 增加链接 /storage/upan_000 -> /storage/3123-19FA 2. 首先如果是应用本身监听的话,使用的是 /…

【Linux线程篇】探索Linux多线程:并行编程的入门指南

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; Linux线程概念 什么是线程 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列”一切进程至少都有一个执行线程线程在进程内部运行&am…

揭秘:离心风机风量背后的科学原理

在工业生产和建筑环境中&#xff0c;离心风机如同一位不倦的呼吸管家&#xff0c;默默地维持着空气流动与品质。 你是否好奇过&#xff0c;究竟是什么因素在背后操纵着这位“呼吸管家”的风量表现呢&#xff1f;今天&#xff0c;就让我们一探究竟。 举个例子&#xff1a;你在吹…

『大模型笔记』GraphRAG:利用复杂信息进行发现的新方法!

GraphRAG:利用复杂信息进行发现的新方法! 文章目录 一. GraphRAG:利用复杂信息进行发现的新方法!1. 将RAG应用于私人数据集2. 整个数据集的推理3. 创建LLM生成的知识图谱4. 结果指标5. 下一步二. 参考文献微软官方推文:https://www.microsoft.com/en-us/research/blog/gra…

HTML5文本标签、图像标签、超链接

一、文本样式标签 字体样式标签&#xff1a; 加粗&#xff1a;<strong>…</strong> 斜体&#xff1a; < em >…</ em> eg&#xff1a; <h3>徐志摩人物简介</h3> <p> <strong>1910</strong>年入杭州学堂<br/> &l…

微信小程序 - 本地存储 增加有效期

小程序的本地存储API提供了wx.setStorageSync和wx.setStorage来存储数据&#xff0c;注意的是&#xff0c;小程序的本地存储并没有明确的有效期设置&#xff0c;存储的数据在不超过限制的情况下&#xff0c;会一直保留。 一、小程序本地存储API 小程序的本地存储API提供了设置…

WEB06JavaScriptAjax

基础语法 引入方式 引入方式 内部脚本&#xff1a;将JS代码定义在HTML页面中 JavaScript代码必须位于<script></script>标签之间 在HTML文档中&#xff0c;可以在任意地方&#xff0c;放置任意数量的<script> 一般会把脚本置于<body>元素的底部&a…

常见的气体流量计有哪些?

1.气体涡轮流量计 适用场合&#xff1a;流量变化小&#xff0c;脉动流频率小&#xff0c;中低压洁净天然气优点 1.精度高&#xff0c;重复性好 2.测量范围广&#xff0c;压损小&#xff0c;安装维修方便 3.具有较高的抗电磁干扰和抗震动能力缺点&#xff1a;分辨率低&#xff…

浏览器中js外挂脚本的执行方式

1、开发工具控制台交互执行 网页中按F12打开开发者工具&#xff0c;选择“控制台”&#xff0c;键入js脚本命令回车执行&#xff0c;适用于临时使用脚本逻辑简单的场景&#xff0c;实例如下&#xff1a; // 获取网页元素的文本脚本 var elem document.getElementById("…

接入应用内支付服务,提高商业变现效率

在当今竞争激烈的移动应用市场中&#xff0c;开发者们面临着提升应用商业变现能力的挑战。用户体验的流畅性和支付的安全性至关重要。 HarmonyOS SDK应用内支付服务&#xff08;IAP Kit&#xff09;为开发者提供了一站式的解决方案&#xff0c;简化了应用内支付的接入流程&…

C嘎嘎:类和对象(一)

目录 面向过程和面向对象的初步认识 类的引入 类的定义 类的访问限定符及封装 访问限定符 封装 类的作用域 类的实例化 类对象模型 如何计算类对象大小 结构体内存对齐规则 this指针 this指针的引出 this指针的特性 类的6个默认成员函数 构造函数 概念 特性 …

喜讯丨美格智能通过国际EcoVadis平台认证企业社会责任并荣获承诺奖章,彰显可持续发展实力

作为全球领先的无线通信模组及解决方案提供商&#xff0c;美格智能在社会责任领域再创新高。近日&#xff0c;美格智能凭借在企业社会责任和可持续性采购发展方面的卓越表现&#xff0c;通过国际在线权威评价机构EcoVadis对公司环境、劳工与人权、商业道德、可持续采购等方面审…