HTML5<canvas>

      HTML5<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript)来完成。<canvas>标签只是图形容器,必须使用脚本来绘制图形。

1)、<canvas> 创建一个画布:

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

</canvas>

使用JavaScript来绘制图像

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

2)、<canvas> 坐标、路径:

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

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

3)、<canvas>  画圆:

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

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,1.5*Math.PI);

ctx.stroke();

</script>

4)、<canvas> 文本:

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

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

//ctx.strokeText("Hello World",10,50);

</script>

5)、<canvas> 渐变:

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

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

var grd=ctx.createLinearGradient(0,0,200,0);

//var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

5)、<canvas> 图像

<p>Image to use:</p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>

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

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("scream");

img.onload = function() {

ctx.drawImage(img,10,10);

}

</script>

3.1、HTML5 <canvas>标签:

Tag

描述

<canvas>

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

3.2、<canvas>颜色、样式和阴影:

属性

描述

fillStyle

设置或返回用于填充绘画的颜色、渐变或模式。

strokeStyle

设置或返回用于笔触的颜色、渐变或模式。

shadowColor

设置或返回用于阴影的颜色。

shadowBlur

设置或返回用于阴影的模糊级别。

shadowOffsetX

设置或返回阴影与形状的水平距离。

shadowOffsetY

设置或返回阴影与形状的垂直距离。

方法

描述

createLinearGradient()

创建线性渐变(用在画布内容上)。

createPattern()

在指定的方向上重复指定的元素。

createRadialGradient()

创建放射状/环形的渐变(用在画布内容上)。

addColorStop()

规定渐变对象中的颜色和停止位置。

3.3、<canvas>线条样式:

属性

描述

lineCap

设置或返回线条的结束端点样式。

lineJoin

设置或返回两条线相交时,所创建的拐角类型。

lineWidth

设置或返回当前的线条宽度。

miterLimit

设置或返回最大斜接长度。

3.4、<canvas> 矩形:

方法

描述

rect()

创建矩形。

fillRect()

绘制"被填充"的矩形。

strokeRect()

绘制矩形(无填充)。

clearRect()

在给定的矩形内清除指定的像素。

3.5、<canvas>路径:

方法

描述

fill()

填充当前绘图(路径)。

stroke()

绘制已定义的路径。

beginPath()

起始一条路径,或重置当前路径。

moveTo()

把路径移动到画布中的指定点,不创建线条。

closePath()

创建从当前点回到起始点的路径。

lineTo()

添加一个新点,然后在画布中创建从该点到最后指定点的线条。

clip()

从原始画布剪切任意形状和尺寸的区域。

quadraticCurveTo()

创建二次贝塞尔曲线。

bezierCurveTo()

创建三次贝塞尔曲线。

arc()

创建弧/曲线(用于创建圆形或部分圆)。

arcTo()

创建两切线之间的弧/曲线。

isPointInPath()

如果指定的点位于当前路径中,则返回 true,否则返回 false。

3.6、<canvas>转换:

方法

描述

scale()

缩放当前绘图至更大或更小。

rotate()

旋转当前绘图。

translate()

重新映射画布上的 (0,0) 位置。

transform()

替换绘图的当前转换矩阵。

setTransform()

将当前转换重置为单位矩阵。然后运行 transform()。

3.7、<canvas>文本:

属性

描述

font

设置或返回文本内容的当前字体属性。

textAlign

设置或返回文本内容的当前对齐方式。

textBaseline

设置或返回在绘制文本时使用的当前文本基线。

方法

描述

fillText()

在画布上绘制"被填充的"文本。

strokeText()

在画布上绘制文本(无填充)。

measureText()

返回包含指定文本宽度的对象。

3.8、<canvas>图像绘制:

描述

drawImage()

向画布上绘制图像、画布或视频。

3.9、<canvas>像素操作:

属性

描述

width

返回 ImageData 对象的宽度。

height

返回 ImageData 对象的高度。

data

返回一个对象,其包含指定的 ImageData 对象的图像数据。

方法

描述

createImageData()

创建新的、空白的 ImageData 对象。

getImageData()

返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。

putImageData()

把图像数据(从指定的 ImageData 对象)放回画布上。

3.10、<canvas>合成:

属性

描述

globalAlpha

设置或返回绘图的当前 alpha 或透明值。

globalCompositeOperation

设置或返回新图像如何绘制到已有的图像上。

3.11、<canvas>其他:

方法

描述

save()

保存当前环境的状态。

restore()

返回之前保存过的路径状态和属性。

createEvent()

getContext()

toDataURL()

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

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

相关文章

PyTorch入门学习(十):神经网络-非线性激活

目录 一、简介 二、常见的非线性激活函数 三、实现非线性激活函数 四、示例&#xff1a;应用非线性激活函数 一、简介 在神经网络中&#xff0c;激活函数的主要目的是引入非线性特性&#xff0c;从而使网络能够对非线性数据建模。如果只使用线性变换&#xff0c;那么整个神…

OpenCV 笔记(4):图像的算术运算、逻辑运算

Part11. 图像的算术运算 图像的本质是一个矩阵&#xff0c;所以可以对它进行一些常见的算术运算&#xff0c;例如加、减、乘、除、平方根、对数、绝对值等等。除此之外&#xff0c;还可以对图像进行逻辑运算和几何变换。 我们先从简单的图像加、减、逻辑运算开始介绍。后续会有…

文件fd.

共识原理: 1.文件 内容 属性 2.文件分为打开的文件 和 没打开的文件 3.打开的文件: 谁打开? 进程! ----本质是研究进程和文件的关系! 根据冯诺依曼原理&#xff0c;文件被打开&#xff0c;必须先被加载到内存&#xff01;不然CPU怎么访问它 那么是文件内容被加载&#xff…

redis如何保证和mysql数据的一致性

Redis和MySQL是两种不同的数据库系统&#xff0c;它们在数据一致性方面有不同的特点和应用场景。保证Redis和MySQL数据的一致性通常需要考虑以下几个方面&#xff1a; 双写策略&#xff1a; 一种常见的方法是采用双写策略&#xff0c;即将更新操作同时写入Redis和MySQL。这确保…

JS计算中出现无限小数位的情况

原因分析&#xff1a; 在开发中遇到了浮点数转换为百分数的问题&#xff0c;用浮点数乘以100结果产生了一堆小数位。查资料发现原因是由于计算机计算会先把数字转换成二进制计算&#xff0c;然后在转换为10进制&#xff0c;导致精度丢失。 在计算机角度&#xff0c;计算机算的…

系列七、Mybatis的二级缓存

一、概述 Mybatis的二级缓存是多个sqlSession共享的&#xff0c;其作用域是mapper的同一个namespace&#xff0c;不同的sqlSession执行两次相同的查询&#xff0c;mybatis会将第一次执行完的数据放到二级缓存中&#xff08;坑&#xff1a;需要执行close操作&#xff0c;要不然不…

C#学习系列之虚方法和多态

C#学习系列之虚方法和多态 啰嗦设计原则&#xff08;六大类其中之一&#xff09;基类的引用使用 共性与差异虚方法和多态的武器使用 其他总结 啰嗦 基础学习。 设计原则&#xff08;六大类其中之一&#xff09; **依赖倒置原则&#xff1a;**依赖抽象类&#xff0c;不依赖具体…

通过Python脚本支持OC代码重构实践(二):数据项提供模块接入数据通路的代码生成

作者 | 刘俊启 导读 在软件开发中&#xff0c;经常会遇到一些代码问题&#xff0c;例如逻辑结构复杂、依赖关系混乱、代码冗余、不易读懂的命名等。这些问题可能导致代码的可维护性下降&#xff0c;增加维护成本&#xff0c;同时也会影响到开发效率。这时通常通过重构的方式对已…

创建ABAP数据库表和ABAP字典对象-使用基本类型增加账号字段03

新增字段 现在你将增加字段&#xff1a;account_number,基于基本类型 1.输入以下内容(包括句点)&#xff0c;然后选择“代码补全”(Ctrl空格): key account_number : abap.2.从下拉列表中选择numc(len)并指定len为8。另外&#xff0c;指定这个关键字段为not null: key accoun…

频频让“智造大佬”们追加投资,长沙凭啥?

文 | 智能相对论 作者 | 范柔丝 自2021年长沙将每年11月1日确定为长沙“企业家日”后&#xff0c;今年已到了第三个长沙“企业家日”。 在完美闭幕的2023年第三届长沙“企业家日”活动中&#xff0c;长沙发布了民企研发投入增量10强、湘商回归标志性项目10强、湘商回归突出贡…

网络综合和简化实频理论学习概述

0、网络综合和简化实频理论学习概述 1、电路综合原理与实践—电抗函数的综合原理 介绍了策动点阻抗函数的综合方法&#xff08;考尔Ⅰ型和Ⅱ型、福斯特Ⅰ型和Ⅱ型、考尔Ⅰ型和Ⅱ型&#xff09;&#xff0c;并给出了基于策动点阻抗函数的综合示例和Matlab代码 2、电路综合原理…

sql server数据库跟踪——SQL Server Profiler解析

工具&#xff1a; SQL Server Profiler这个工具是SQL Server数据库自带的语句执行跟踪工具&#xff0c;常使用于分析软件修改数据库时所执行的语句&#xff0c;适合用来研究软件运行数据库的原理。 打开方式&#xff1a; 本机安装了SQL server的话&#xff0c;都是自带的。直接…

useEffect如何模拟生命周期?

文章目录 前言介绍后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;react.js &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误&#xff0c;感谢大家指出)&am…

hdlbits系列verilog解答(优化32位加法器)-27

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 行波进位加法器(参见前一个练习)的一个缺点是,加法器计算执行的延迟(在最坏的情况下,从最初进位开始)相当慢,并且第二级加法器在第一阶段加法器完成之前无法开始计算其执行。这会使加法器变慢。其中一项…

java读取.properties文件,通过key获取value

1.将xx.properties文件放置在src/main/resources/config目录下&#xff08;config是自己建的目录&#xff09; 2. 通过ApplicationHome类获取target路径 ApplicationHome applicationHome new ApplicationHome(this.getClass());String path applicationHome.getSource().ge…

c++设计模式二:原型模式

使用场景&#xff1a;当需要构建多个相同的类对象时&#xff0c;而且该类对象结构较为复杂&#xff0c;如果每个都重新组织构建会很麻烦。 其实&#xff0c;就是写一个拷贝构造函数&#xff0c;或者写一个拷贝每个成员变量的clone()方法。 举例说明&#xff1a;比如一个相亲网站…

R语言如何写一个爬虫代码模版

R语言爬虫是利用R语言中的网络爬虫包&#xff0c;如XML、RCurl、rvest等&#xff0c;批量自动将网页的内容抓取下来。在进行R语言爬虫之前&#xff0c;需要了解HTML、XML、JSON等网页语言&#xff0c;因为正是通过这些语言我们才能在网页中提取数据。 在爬虫过程中&#xff0c;…

阿里云无影升级2.0 云电脑解决方案时代到来

10月31日&#xff0c;杭州云栖大会上&#xff0c;阿里云宣布无影全新升级2.0&#xff1a;从云电脑到云上解决方案&#xff0c;帮助中小企业更便捷地构建云上办公&#xff0c;并开放无影产品及解决方案能力&#xff0c;为生态合作伙伴提供企业云平台&#xff0c;帮助其打造定制化…

无需服务器内网穿透Windows下快速搭建个人WEB项目

&#x1f4d1;前言 本文主要是windows下内网穿透文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ 参考自&#xff1a;Windows搭建web站点&#xff1a;免费内网穿透发布至公网 &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首…

[C++ ]:5.类和对象中(运算符重载补充)+ 类和对象下(初始化列表)

类和对象中&#xff08;运算符重载补充&#xff09; 类和对象下&#xff08;初始化列表&#xff09; 一.运算符重载补充&#xff1a;1.流插入运算符&#xff1a;1.考虑到隐含的参数指针&#xff1a;2.进行优化&#xff01;2-1&#xff1a;解决办法&#xff1a;友元2-2&#xff…