W3CAPI 在线教程 | 菜鸟教程_LOGO
文档目录
文档目录
我的书签
 

HTML

HTML 5 基础教程

HTML是超文本标记语言,是一种专门用来制作网页的语言,而HTML5就是它的第五个版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成,该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能,同时也给我们开发者带来了更多的开发选择,学习它是每个前端开发者必修的课程。

W3CAPI
1
2020-06-15 06:59:35

HTML5 Canvas 简介

一、什么是 Canvas 画布?

概念:HTML5 的 canvas 标签元素让开发者 可以使用 JavaScript 在网页上动态的绘制和处理图形
特性:
  • <canvas> 标签只是图形容器,您必须使用脚本来绘制图形
  • 画布是一个矩形区域,您可以控制其每一像素
  • canvas 拥有多种方法来 绘制路径、矩形、圆形、字符以及图像

二、为什么需要 Canvas 画布 ?

问题驱动一:我们想要在网页中显示统计图,在之前的HTML语言标准中并没有此类功能的定义,我们不得不借助其他技术来实现,比如:flash等插件
问题驱动二:我们想要在网页中制作游戏,游戏制作一般都需要针对各种对象:场景、角色、道具等 的重复绘制,如果没有提供绘制功能则实现起来非常困难

三、浏览器兼容

Internet Explorer Firefox Opera Chrome Safari 
9.0+ 2.0+ 9.0+ 4.0+ 3.1+

HTML5 Canvas 使用方法

掌握一个新的开发知识,需要了解它是怎么使用的?按照什么样的步骤操作的?HTML5 Canvas 的使用方法如下步骤:

一、在页面中创建 Canvas 标签

我们可以直接 向 HTML5 页面中 添加 canvas 标签元素 并 规定标签元素的 id(指定id要在后续步骤中使用)、宽度和高度(默认情况下 <canvas> 标签元素没有边框和内容,这里指定它的宽、高和边框):
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

二、通过 JavaScript 来动态绘制和处理图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须使用 JavaScript 来完成,按照如下步骤即可:
  1. 使用dom通过id获取canvas对象:var c=document.getElementById("myCanvas");
  2. 创建画布的上下文对象 context(此对象是HTML5 的内置对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,使用getContext("2d") 函数来获取) 准备绘制:var ctx=c.getContext("2d");
  3. 使用上下文对象 context 的方法来绘制和处理图形
如下代码:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制一个红色的矩形
cxt.fillStyle="#FF0000"; //设置矩形填充颜色为红色,fillStyle属性值可以是CSS颜色、渐变或图案。fillStyle 默认设置是#000000(黑色)
cxt.fillRect(0,0,150,75); //设置矩形的位置、大小和尺寸,fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
</script>
​​​​​​

HTML5 Canvas 坐标系

在数学中,我们学习过坐标系,它用来描述物体在一个空间中的具体位置;对于HTML5中的画布来说,它是一个二维网格(后期可能会有三维空间),它使用了坐标的概念来描述物体在画布中的位置:
  • canvas 画布可以看做是一个二维网格,横向可以看做X轴,纵向可以看做是Y轴
  • canvas 二维画布的左上角坐标为 (0,0)
  • canvas 中所有需要绘制的对象 都是基于左上角坐标位置
  • ctx.fillRect(0,0,150,75) 方法实现的功能为:从左上角开始 (0,0),在画布上绘制 150x75 的矩形图形
如下实例,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动到矩形框上,显示定位坐标:  

把鼠标悬停在矩形上可以看到坐标

 
 

HTML5 Canvas 实例

一、使用 Canvas 绘制路径

  1. moveTo(x,y) 定义线条开始坐标
  2. lineTo(x,y) 定义线条结束坐标
  3. 使用 stroke() 方法来绘制线条
通过指定从何处开始,在何处结束,来绘制一条线,如下代码:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3; margin: 0 auto; display: block;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();
</script>

二、使用 Canvas 绘制圆形

  1. 使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
  2. 调用 arc() 方法,传入相应的参数
  3. 使用 stroke() 方法来绘制线条
通过给定参数来规定圆的尺寸、颜色和位置,代码如下:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(80,28,25,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>
执行一下

三、使用 Canvas 实现渐变

渐变效果可以填充在矩形、圆形、线条、文本等画布元素中, 各种形状可以自己定义不同的颜色;渐变效果目前有两种:
  1. createLinearGradient(x,y,x1,y1) - 创建线条渐变
  2. createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
实现渐变的步骤和代码:
  1. 创建渐变对象(线性还是径向)
  2. 使用两种或两种以上的停止颜色来实现颜色渐变效果:addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1
  3. 应用渐变到画布元素中,设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0); //线性
    //var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
    grd.addColorStop(0,"blue");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>
执行一下

四、使用 Canvas 绘制图像

  1. 获取或者创建 图像的dom对象
  2. 使用 drawImage 方法实现图像的绘制
把一幅图像放置到画布上代码如下:
<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<img id="img" src="/static/resource/img/logo.png" style="display: none;" />
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //创建图像的dom对象,第一种方法
    var img=new Image();
    img.src="/static/resource/img/logo.png";
    //创建图片的dom对象,第二种方法
    //var img= document.getElementById("img");
    ctx.drawImage(img,0,0);
</script>
执行一下

五、使用 Canvas 绘制文本

  1. 使用 font  属性来定义字体
  2. 使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
  3. 使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本
使用 "微软雅黑" 字体在画布上绘制一个高 30px 的文字(实心或空心),代码如下:
<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px 微软雅黑";
    ctx.fillText("Hello World",10,50); //绘制实心文字
    //ctx.strokeText("Hello World",10,50); //绘制空心文字
</script>
执行一下
 
相关提问
敬请期待