HTML5学习,常用常记(canvas,SVG)

el/2024/5/21 21:35:42

什么是 canvas?

  • HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.
  • <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
  • 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");<!--找到canvas元素-->var ctx=c.getContext("2d");<!--创建context对象-->ctx.fillStyle="#FF0000";<!--绘制红色矩形-->ctx.fillRect(0,0,150,75);<!--fillRect(x,y,width,height) 方法定义了矩形当前的填充方式-->
</script>

坐标:左上角为(0,0);

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);<!--moveTo(x,y) 定义线条开始坐标-->ctx.lineTo(200,100);<!--lineTo(x,y) 定义线条结束坐标-->ctx.stroke();<!--绘制线条我们必须使用到 "ink" 的方法,就像stroke()-->
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);<!--arc(x,y,r,start,stop)方法绘制圆形-->ctx.stroke();
</script>

Canvas - 文本

使用 canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="20px Arial";ctx.fillText("Hello World",10,30);<!--实心文本-->ctx.strokeText("Hello World",10,50);<!--空心文本-->
</script>

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
</script>

创建渐变轴:createLinearGradient(x,y,x1,y1),x,y指定渐变起点,本例中x=0,y=0以坐标轴(0,0)点开始作为渐变起点,x1,y1指定渐变终点(200,0),createLinearGradient,定义线性渐变,以起点到终点连线,作为渐变轴,本里是以(0,0)–>(200,0)即横向渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
</script>
<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="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。
</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);<!--drawImage(image,x,y)-->} 
</script>

canvas参考手册;

学习 HTML5 Canvas 这一篇文章就够了;

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"><polygon points="100,10 40,180 190,60 10,60 160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

SVG 与 Canvas两者间的区别

  • SVG 是一种使用 XML 描述 2D 图形的语言。
  • Canvas 通过 JavaScript 来绘制 2D 图形。
  • SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  • 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
  • Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

CanvasSVG
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用

 


http://www.ngui.cc/el/2274573.html

相关文章

HTML5学习,常用常记(MathML,拖放,定位)

HTML5 MathML HTML5 可以在文档中使用 MathML 元素&#xff0c;对应的标签是 <math>...</math> 。MathML 是数学标记语言&#xff0c;是一种基于XML&#xff08;标准通用标记语言的子集&#xff09;的标准&#xff0c;用来在互联网上书写数学符号和公式的置标语言…

HTML5学习,常用常记(Video,Audio,Input)

检测您的浏览器是否支持 HTML5 视频&#xff1b; <video width"320" height"240" controls><source src"movie.mp4" type"video/mp4"><source src"movie.ogg" type"video/ogg">您的浏览器不支…

HTML5学习,常用常记(表单元素,表单属性(真心多,但真的常用))

HTML5 <datalist> 元素 <datalist> 元素规定输入域的选项列表。<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时&#xff0c;浏览器应该在该域中显示填写的选项&#xff1a;使用 <input> 元素的列表属性与…

HTML5学习,常用常记(语义元素,Web存储(。。。))

什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div> 和 <span> - 无需考虑内容.语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容. HTML5 <section> 元素 <section> 标…

HTML5学习,常用常记(Web SQL,应用程序缓存)

HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分&#xff0c;但是它是一个独立的规范&#xff0c;引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员&#xff0c;应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程&#x…

HTML5学习,常用常记(Web Worker,服务器发送事件,其他功能)

什么是 Web Worker&#xff1f; 当在 HTML 页面中执行脚本时&#xff0c;页面的状态是不可响应的&#xff0c;直到脚本已完成。web worker 是运行在后台的 JavaScript&#xff0c;独立于其他脚本&#xff0c;不会影响页面的性能。您可以继续做任何愿意做的事情&#xff1a;点击…

JAVA概述(知到课程 + 菜鸟教程随笔)

一次编写&#xff0c;处处运行&#xff1b; 字节码文件&#xff0c;JAVA虚拟机&#xff1b; 面向对象&#xff0c;封装继承多态&#xff0c;多线程&#xff1b; JAVA 2se桌面开发低端商务应用 1ee企业 3me消费产品和嵌入式设备&#xff1b; jar.exe打包java文件&#xff0c…

JAVA学习,常用常记(基础语法,标识符,修饰符,关键字,注释(菜鸟教程))

Java 基础语法 一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态和行为。例如&#xff0c;一条狗是一个对象&#xff0c…

JAVA学习,常用常记(标识符,数据类型,运算符,分支语句,循环语句,跳转语句(知到))

呃&#xff0c;学过C和Python之后直接过掉就好了&#xff0c;自己拼的标识符一般不会搞出关键字的&#xff1b; 所有语言中&#xff08;我接触到的&#xff09;&#xff0c;html css不区分大小写&#xff0c;其他语言区分大小写&#xff08;对大小写敏感&#xff09;&#xf…

JAVA学习,常用常记(基本数据类型补充(包装类,min,max),转义,三种变量类型,静态成员函数和类变量(菜鸟教程补充))

Java 的两大数据类型: 内置数据类型引用数据类型 public class PrimitiveTypeTest { public static void main(String[] args) { // byte System.out.println("基本类型&#xff1a;byte 二进制位数&#xff1a;" Byte.SIZE); System.out.println("包装类…