canvas设置圆锥形渐变

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 圆锥形渐变语法及参数
      • 参数 image
    • 示例效果图
    • 示例源代码(共124行)
    • 参考API
    • canvas基本属性
    • canvas基础方法

如何使用canvas设置圆锥形渐变呢? canvas createConicGradient() 方法返回一个圆锥形 CanvasGradient。 要应用于形状,必须首先将渐变指定给 fillStyle 或 strokeStyle 属性。

圆锥形渐变语法及参数

createConicGradient(startAngle, x, y)

参数 image

startAngle:起始的角度(正向右开始)
x,y:圆锥的中心点

示例效果图

在这里插入图片描述

示例源代码(共124行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-14
*/
<template><div class="djs_container"><div class="top"><h3>canvas设置圆锥形渐变</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw1()">圆锥形渐变矩形</el-button><el-button type="primary" size="mini" @click="draw2()">圆锥形渐变文字</el-button><el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,imgData: require("@/assets/tx.png")}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");},draw1() {this.clearCanvas()// The start angle is 0// The center position is 490, 245const gradient = this.ctx.createConicGradient(0, 490, 245);gradient.addColorStop(0, "red");gradient.addColorStop(0.25, "orange");gradient.addColorStop(0.5, "yellow");gradient.addColorStop(0.75, "green");gradient.addColorStop(1, "blue");this.ctx.fillStyle = gradient;this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);},draw2() {this.clearCanvas()const gradient = this.ctx.createConicGradient(0, 490, 245);gradient.addColorStop(0, "red");gradient.addColorStop(0.25, "orange");gradient.addColorStop(0.5, "yellow");gradient.addColorStop(0.75, "green");gradient.addColorStop(1, "blue");this.ctx.fillStyle = gradient;this.ctx.font = '120px STheiti, SimHei';this.ctx.fillText('还是大剑师兰特', 64, 266);},}}
</script><style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #994170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #994170;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #f9f9f9;}
</style>

参考API

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

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

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

相关文章

隧道应用4-内网穿透EW的简单使用

与netsh端口映射内网类似&#xff0c;也是通过跳板机实现 EW官网地址&#xff1a;http://rootkiter.com/EarthWorm EW 是一套便携式的网络穿透工具&#xff0c;具有 SOCKS v5服务架设和端口转发两大核心功能&#xff0c;可在复杂网络环境下完成网络穿透。 注&#xff1a; 考虑…

【MATLAB源码-第111期】基于matlab的SCMA系统误码率仿真,采用polar码编码,输出误码率曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 SCMA&#xff08;Sparse Code Multiple Access&#xff09;系统是一种先进的多用户多输入多输出&#xff08;MU-MIMO&#xff09;通信系统&#xff0c;它采用了一种独特的多址访问技术&#xff0c;旨在提高无线通信网络的效率…

Ubuntu 22.04 Cron使用

需要定时处理的场景还是比较多的&#xff0c;比如信息推送、日志清理等。 这篇文章我们来说说如何使用cron来实现定时处理&#xff0c;以及监控任务的执行。 使用 Ubuntu中使用cron&#xff0c;要用到的命令是crontab。不加sudo时&#xff0c;处理的是个人的定时任务。当加上…

STEGNN

STEGNN 摘要 随着智能交通系统(ITS)逐渐融入我们的日常生活,人们普遍认为路网预测是智能交通系统的杀手锏,具有很高的社会和经济效益。然而,目前的解决方案忽视了时空交通数据的异质性,无法捕捉隐藏的时空相关性。本文介绍了 STEGNN:一种用于路网预测的新型时空嵌入图神…

Java控制结构解析

在 Java 编程语言中&#xff0c;控制结构用于控制程序的执行流程。以下是几种常见的控制结构及其解析&#xff1a; 条件语句&#xff08;If-else 语句&#xff09;&#xff1a;根据条件的真假来执行不同的操作。Switch 语句&#xff1a;根据一个表达式的值&#xff0c;选择不同…

让Windows上vscode的C语言scanf函数可以读取中文字符

windows的默认字符集保存为GBK不要修改 区域设置–时钟和区域–区域–管理–更系统区域设置–&#xff08;不要勾选&#xff09;使用UTF-8。 查看验证当前字符集&#xff1a; cmdchcp 活动代码页: 936936就是简体中文GBK vscode的setting.json文件添加如下代码 点击左下角…

P4学习(一) 环境搭建

系列文章目录 第一章 P4学习入门之虚拟机环境搭建 文章目录 系列文章目录前言一、P4是什么&#xff1f;二、搭建步骤1.下载虚拟机镜像2.虚拟机管理软件载入镜像2.1 找到你镜像的所在位置2.2 打开VMware Workstation2.3 载入镜像 3.检验环境是否配置成功 P4 的真机环境搭建 前言…

js map方法的使用

在 JavaScript 中&#xff0c;map() 方法是数组对象的一个内置方法&#xff0c;用于对数组中的每个元素执行指定的操作&#xff0c;并返回一个新的数组&#xff0c;该数组包含了操作后的结果。 map() 方法接受一个回调函数作为参数&#xff0c;该回调函数会被应用于数组中的每…

【100条git命令】

100条git命令 git init: 创建一个新的Git仓库。git clone: 从现有仓库克隆一个新的仓库。git add: 将更改添加到暂存区域。git commit: 提交暂存区中的更改到本地仓库。git push: 将本地仓库中的更改推送到远程仓库。git pull: 从远程仓库拉取更改并合并到本地仓库。git fetch:…

Android 9.0ota升级关于Systemui下拉状态栏quick_settings_tiles_default值减少时更新的功能实现

1.前言 在9.0的系统rom定制化开发中,在进行systemui的下拉状态栏定制以后,当需要ota升级的时候,发现在systemui下拉状态栏的快捷功能键部分去掉的 一些快捷功能并没有减少,这是因为systemui有缓存造成的只有清理缓存或者恢复出厂设置后才正常,所以今天就来实现不需要清理缓…

10.9.2 std::function 代替函数指针

std::function是一个模板类&#xff0c;基本可作为函数指针的代替品&#xff0c;具备更多功能&#xff0c;特别是与函数对象及bind配合使用。使用std::function时&#xff0c;需要添加头文件 #include <functional> 1.定义函数指针 18行&#xff0c;定义了一个函数指针类…

在win11中安装“mingw-w64-gcc-13.2-stable-r40”

在windows系统中&#xff0c;安装完VSCode后&#xff0c;还需要安装mingw&#xff0c;才可以使用C和C编译。 1、从MinGW-w64镜像站点&#xff1a;http://files.1f0.de/mingw&#xff0c;下载“mingw-w64-gcc-13.2-stable-r40”&#xff0c;见下图&#xff1a; 2、将“mingw-w6…

docker 安装redis (亲测有效)

目录 1 安装 1 安装 1 将redis 的 tar 包 上传到服务器 上传之后tar 包&#xff0c;将他变成镜像 输入docker images,发现目前是没有镜像的&#xff0c;现在将tar 包变成镜像 docker load -i redis.tar以上就将tar 包变成镜像了 现在在宿主机找一个地方&#xff0c;存放数据…

《GreenPlum系列》GreenPlum初级教程-02GreenPlum单节点安装

文章目录 第二章 GreenPlum安装1.Docker创建centos容器1.1 拉取centos7镜像1.2 创建容器1.3 进入容器1.4 容器和服务器免密操作1.4.1 生成密钥1.4.2 拷贝密钥 1.5 安装ssh服务和网络必须应用1.6 容器设置root密码1.6.1 安装passwd应用1.6.2 容器本机root设置密码 1.7 容器本机免…

【深度学习:Micro-Models】用于标记图像和视频的微模型简介

【深度学习&#xff1a;Micro-Models】用于标记图像和视频的微模型简介 微模型&#xff1a;起源故事微模型到底是什么&#xff1f;更详细地解释微观模型&#xff1a;一维标签蝙蝠侠效率 在计算机视觉项目中使用微模型的额外好处面向数据的编程 在本文中&#xff0c;我们将介绍 …

动态分配内存的风险

1. 悬挂指针问题 在指针释放之后要将指针置空 delete ptr; ptr nullptr;2.内存碎片问题 频繁的申请与释放小块内存会造成大量的内存碎片。 3.内存申请与释放问题 C与C的内存申请与释放最好不要混用。 4.复制内存 基本语法 void* memcpy(void* _Dst, void* _Src, size_…

移动硬盘无法识别处理办法

今天这里做一下总结&#xff0c;我现在手上有一个移动硬盘&#xff0c;插入win10电脑是有盘号的&#xff0c;但是 但是点击就出问题 解决办法 安装DiskGenius 下载网址在https://www.diskgenius.cn/download.php 下载之后解压安装就行&#xff0c;非常简单&#xff0c;然后…

wordpress相册gallery自定义

把这段代码添加到functions.php就可以实现相册gallery输出的自字义 add_filter( the_content, wpdocs_show_gallery_image_urls );function wpdocs_show_gallery_image_urls( $content ) {global $post;if( ! is_singular() ) return $content;if( ! has_shortcode( $post->…

理论U4 集成学习

文章目录 一、集成学习1、传统学习的问题2、集成学习1&#xff09;背景2&#xff09;概念3&#xff09;注意 3、多样性度量4、多样性增强1&#xff09;多样性增强&#xff1a;在学习过程引入随机性2&#xff09; 输入属性扰动3&#xff09; 输出表示扰动4&#xff09; 算法参数…

C#中各变量类型占多少个字节,容量又是多少呢?

变量的本质 变量的本质是一段内存的别名。 各变量占字节数&#xff1a; 通过sizeof方法 能够获取变量类型所占的内存空间&#xff08;单位是字节&#xff09;&#xff1a; int sbytesize sizeof(sbyte); sbyte 1字节 short 2字节 int 4字节 long 8字节 byte …