canvas基本绘制对象

目录

 绘制画布

设置画布 

 绘制圆形

绘制矩形填充渐变色 

绘制文字及文字样式


 绘制画布

<canvas id="canvas" width="800" height="600"></canvas>

设置画布 

//获得画布元素var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d');ctx.lineWidth=3;// ctx.rect(20,20,100,100);//ctx.rect(x,y,w,h)ctx.fillStyle='purple';//填充色ctx.strokeStyle="green";

 绘制圆形

 //绘制圆形ctx.arc(300,350,100,0,8);//x,y,半径,起始角度,弧长(Math.PI*2表示圆,Math.PI是半圆),true或false(true是顺时针,false是逆时针)ctx.stroke();

绘制矩形填充渐变色 

 

var grd=ctx.createLinearGradient(0,90,0,0);//x0开始点的x轴(沿x轴逆向渐变),开始点的y轴(沿y轴逆向渐变),结束点的x轴(沿x轴顺向渐变),结束点的y轴(沿y轴顺向渐变)grd.addColorStop(0,'red');grd.addColorStop(1,'blue');ctx.fillStyle=grd;ctx.fillRect(10,10,200,200);

绘制文字及文字样式

ctx.font="50px '平方'";//文字样式ctx.shadowColor="black";//阴影颜色ctx.shadowOffsetX=5;//设置字体阴影x轴的颜色ctx.shadowOffsetY=5;//设置阴影y轴的颜色ctx.shadowBlur=10;//设置字体模糊度ctx.fillText('hey bro',300,50);//设置实心字体(text,x,y,maxWidth)ctx.strokeText('hey bro',300,200);//设置空心字提(text,x,y,maxWidth)

  

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

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

相关文章

Python求小于m的最大10个素数

为了找到小于m的最大10个素数&#xff0c;我们首先需要确定m的值。然后&#xff0c;我们可以使用一个简单的算法来检查每一个小于m的数字是否是素数。 下面是一个Python代码示例&#xff0c;可以找到小于m的最大10个素数&#xff1a; def is_prime(n): if n < 1: …

DAP数据集成与算法模型如何结合使用

企业信息化建设会越来越完善&#xff0c;越来越体系化&#xff0c;当今数据时代背景下更加强调、重视数据的价值&#xff0c;以数据说话&#xff0c;通过数据为企业提升渠道转化率、改善企业产品、实现精准运营&#xff0c;为企业打造自助模式的数据分析成果&#xff0c;以数据…

乐益达教育网页

目录 一、网页效果 二、html代码 三、CSS代码 四、JS代码 一、网页效果 二、html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…

excel数据重复率怎么计算【保姆教程】

大家好&#xff0c;今天来聊聊excel数据重复率怎么计算&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; excel数据重复率怎么计算 在Excel中计算数据重复率可以通过以下步骤实现&#xff1a; 1. 确定重复…

priority_queue的实现,容器和仿函数

首先我们要实现priority_queue就必须要了解其底层&#xff0c;本质其实就是堆排序&#xff0c;大根堆就是升序排序&#xff0c;小根堆就是降序排序。 原因是因为&#xff0c;我们堆排序取元素可以将堆顶和最后一个元素交换&#xff0c;然后让堆顶下沉&#xff0c;这样可以维护…

AWTK 串口屏开发(2) - 数据绑定高级用法

AWTK 串口屏 智能家居示例 1. 功能 这个例子稍微复杂一点&#xff0c;界面这里直接使用了 立功科技 ZDP1440 HMI 显示驱动芯片 例子中的 UI 文件和资源&#xff0c;重点关注数据绑定。在这里例子中&#xff0c;模型&#xff08;也就是数据&#xff09;里包括一台空调和一台咖…

俄罗斯军方计划用 Astra Linux 取代 Windows!

网络安全正在改变全球化的面貌&#xff0c;各国政府为了防范外国的间谍和破坏活动&#xff0c;正积极发展自己的技术。在这一趋势下&#xff0c;俄罗斯军方已经开始用 Linux 发行版 Astra Linux 替换 Windows 系统。 如何提高Linux系统安全性&#xff1f;提升Linux安全的关键策…

ChatGPT 成为 Nature 年度十大人物,首个非人类实体

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 2023 年即将结束&#xff0c;现在是时候回顾今年的重要科学进展了。12 月 13 日&#xff0c;著名科学期刊《Nature》刚刚发布了 2023 年度的十大人物&…

Amazon CodeWhisperer 开箱初体验

文章作者&#xff1a;Coder9527 科技的进步日新月异&#xff0c;正当人工智能发展如火如荼的时候&#xff0c;各大厂商在“解放”码农的道路上不断创造出各种 Coding 利器&#xff0c;今天在下就带大家开箱体验一个 Coding 利器&#xff1a; Amazon CodeWhisperer。 亚马逊云科…

十五 动手学深度学习v2计算机视觉 ——全连接神经网络FCN

文章目录 FCN FCN 全卷积网络先使用卷积神经网络抽取图像特征&#xff0c;然后通过卷积层将通道数变换为类别个数&#xff0c;最后通过转置卷积层将特征图的高和宽变换为输入图像的尺寸。 因此&#xff0c;模型输出与输入图像的高和宽相同&#xff0c;且最终输出通道包含了该空…

Ubuntu 22.04源码安装yasm 1.3.0

sudo lsb_release -r看到操作系统的版本是22.04&#xff0c;sudo uname -r可以看到内核版本是5.15.0-86-generic&#xff0c;sudo gcc --version可以看到版本是11.2.0&#xff0c;sudo make --version可以看到版本是GNU Make 4.3。 下载yasm http://yasm.tortall.net/Downlo…

【Cisco Packet Tracer】路由器实验 静态路由/RIP/OSPF/BGP

本教程讲解路由器的静态IP配置、RIP、OSPF、BGP等实验内容。 一、基本设置 绘制以下拓扑结构&#xff1a; PC0设置&#xff1a; PC1设置&#xff1a; Router0端口0设置&#xff1a; Router0端口1设置&#xff1a; Router1端口0设置&#xff1a; Router1端口1设置&#xff1a…

大型软件编程实际应用实例:个体诊所电子处方系统,使用配方模板功能输入症状就可开出处方软件操作教程

一、前言&#xff1a; 在开电子处方的时候&#xff0c;如果能够输入症状就可以一键导入配方&#xff0c;则在很大程度上可以节省很多时间。而且这个配方可以根据自己的经验自己设置&#xff0c;下面以 佳易王诊所电子处方软件为例说明。 二、具体一键导入配方详细操作教程 点击…

云服务配置docker镜像容器以及常用操作命令

首先通过ssh进入云服务器。如何ssh进入云服务器。 简单讲解一下docker中镜像和容器&#xff0c;打个比方&#xff0c;镜像相当于印钱的那个模板&#xff0c;容器相当于从模板上拓下来的钱&#xff0c;不同的模板可以印出不同的钱。但容器被修改后也可以变成新的镜像&#xff0…

卷积神经网络(CNN)中感受野的计算问题

感受野 在卷积神经网络中&#xff0c;感受野&#xff08;Receptive Field&#xff09;的定义是卷积神经网络每一层输出的特征图&#xff08;feature map&#xff09;上每个像素点在原始图像上映射的区域大小&#xff0c;这里的原始图像是指网络的输入图像&#xff0c;是经过预处…

php入门、安装wampserver教程

php声称是全世界最好的语言&#xff0c;今天这篇文章就带大家入门学习php&#xff0c;php和python、javasript一样&#xff0c;是一种弱类型的脚本语言。 一、php开发环境搭建 作为初学者&#xff0c;学习php建议安装wampserver&#xff0c;wampserver是包含了apache、php和mys…

设计原则 | 接口隔离原则

一、接口隔离原则 1、原理 客户端不应该依赖它不需要的接口&#xff0c;即一个类对另一个类的依赖应该建立在最小的接口上。如果强迫客户端依赖于那些它们不使用的接口&#xff0c;那么客户端就面临着这个未使用的接口的改变所带来的变更&#xff0c;这无意间导致了客户程序之…

智能优化算法应用:基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于平衡优化器算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.平衡优化器算法4.实验参数设定5.算法…

3D渲染和动画制作软件KeyShot Pro mac附加功能

KeyShot 11 mac是一款专业化实时3D渲染工具&#xff0c;使用它可以简化3d渲染和动画制作流程&#xff0c;并且提供最准确的材质及光线&#xff0c;渲染效果更加真实&#xff0c;KeyShot为您提供了使用 CPU 或 NVIDIA GPU 进行渲染的能力和选择&#xff0c;并能够线性扩展以获得…

【深度学习】强化学习(二)马尔可夫决策过程

文章目录 一、强化学习问题1、交互的对象2、强化学习的基本要素3、策略&#xff08;Policy&#xff09;4、马尔可夫决策过程1. 基本元素2. 交互过程的表示3. 马尔可夫过程&#xff08;Markov Process&#xff09;4. 马尔可夫决策过程&#xff08;MDP&#xff09;5. 轨迹的概率计…