html5新标签 画布 canvas 替代了 flash
绘制矩形边框，和填充不同的是绘制使用的是strokeRect， 和strokeStyle实现的
绘制路径
绘制路径的作用是为了设置一个不规则的多边形状态
路径都是闭合的，使用路径进行绘制的时候需要既定的步骤：
需要设置路径的起点
使用绘制命令画出路径
封闭路径
填充或者绘制已经封闭路径的形状
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn" style="width: 50px;height: 50px;background-color: red;" >
清屏
</button>
<canvas id="context" width="500" height="600">当前的浏览器版本不支持，请升级浏览器</canvas>
<script >
const dom = document.querySelector("#context");
// console.log(dom.getContext);
if(!dom.getContext) {
alert("当前浏览器不支持")
}
var btn = document.querySelector("#btn"); const ctx = dom.getContext("2d"); // 获取2D上下文
if(ctx != null) {
// 创建一个路径
ctx.beginPath()
ctx.moveTo(100,100); // 需要设置路径的起点
ctx.lineTo(200,200);
ctx.lineTo(400,200);
ctx.lineTo(400,100); // 使用绘制命令画出路径
ctx.closePath(); // 封闭路径
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.fillStyle = "blue";
ctx.fill(); // 填充或者绘制已经封闭路径的形状
} btn.onclick = () => {
ctx.clearRect(0,0,600,600);
}
</script>
</body>
</html>
总结我们要绘制一个图形，要按照顺序
- 开始路径
ctx.beginPath() - 移动绘制点
ctx.moveTo(x, y) - 描述绘制路径
ctx.lineTo(x, y) - 多次描述绘制路径
ctx.lineTo(x, y) - 闭合路径
ctx.closePath() - 描边
ctx.stroke() - 填充
ctx.fill()
此时我们发现之前我们在学习绘制矩形的时候使用的是fillRect和strokeRect，但是实际上fill和stroke也是具有绘制填充功能的
stroke(): 通过线条来绘制图形轮廓。
fill(): 通过填充路径的内容区域生成实心的图形。
渲染图片
// 导入图片
if(ctx !== null) {
// 第一步是创建一个image元素
let image:HTMLImageElement = new Image()
// 用src设置图片的地址
image.src = "image/test1.png"
// 必须要在onload函数内绘制图片，否则不会渲染
image.onload = function() {
ctx.drawImage(image, 100, 100)
}
}
canvas是可以进行变形的，但是变形的不是元素，而是ctx，ctx就是整个画布的渲染区域，整个画布在变形，我们需要在画布变形前进行保存和恢复：
save()：保存画布（canvas）的所有状态。restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。
Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。
html5新标签 画布 canvas 替代了 flash的更多相关文章
- Html5新标签解释及用法
Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...
- Html5新标签及用法
HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...
- html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
- 【HTML5】如何处理HTML5新标签的浏览器兼容版问题
HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...
- HTML5新标签 w3c
w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- 【29】html5新标签有哪些？
[29]html5新标签有哪些? canvas svg video audio [01]article(IE8不支持) [01]details [02]aside(IE8不支持) [03]header ...
- HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？
HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...
随机推荐
- python面向对象：继承
python面向对象:继承super()的用 super()的用法 一: class A: def __init__(self): self.a = '这是一个属性' def add(self, x) ...
- 【JSON】JavaScript Object Notation JS对象表示规则
什么是 JSON? JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的文本格式 ...
- 一个简单的例子测试numpy和Jax的性能对比
参考: https://baijiahao.baidu.com/s?id=1725356123619612187&wfr=spider&for=pc 个人认为如果把Jax作为一款深度学 ...
- Ubuntu18.04系统下 临时使用 socks5代理apt-get的方法
参考: https://www.cnblogs.com/iwetuan/p/13567810.html ------------------------------------------------ ...
- 开源机器学习版本的Github：Hugging Face
参考: https://baijiahao.baidu.com/s?id=1776478347325976510 https://zhuanlan.zhihu.com/p/535100411 ==== ...
- 【转载】联合发布|面向眩晕诊疗的中文医疗对话大模型MedChat发布！
原文地址: https://mp.weixin.qq.com/s/XrddDDpDXHKBcEueH8YXcA ============================================ ...
- SMU 2024 spring 天梯赛4
SMU 2024 spring 天梯赛4 7-1 心理阴影面积 - SMU 2024 spring 天梯赛4 (pintia.cn) 由 \(d = \frac{Ax+By+c}{\sqrt {A^2 ...
- dubbo服务治理（一）降级
在线网站一般都会有服务器压力剧增的时候,比如说网上商城的促销,这个时候常用的手段就是服务降级,根据当前业务情况及流量对一些服务和页面有策略的降级,以此缓解了服务器资源压力,以保证核心任务的正常运行,同 ...
- 首次在WebAPI中写单元测试
xUnit 这次我使用的是xUnit测试框架,而不是VS自带的MSTest框架.在添加新建项目时选择xUnit测试项目就行了. 目前只体验到了一个差别,即xUnit可以使用特性向测试方法传参,而不用在 ...
- 【Linux驱动】充电芯片bq24735调试详解
一.bq24735简介 bq24735 是一款高效率同步电池充电器. 当系统供电需求暂时高于适配器最大供电水平的时候, bq24735 使用智能加速技术来允许电池向系统中释放能量,这样的话将保护适配器 ...