HTML 5 基础教程

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

W3CAPI

2020-06-15 06:59:35

文档目录

我的书签

请登录

HTML5 Canvas 实例

一、使用 Canvas 绘制路径

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
使用 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 绘制圆形

使用 beginPath() 方法来清除当前画布中存在的路径并且准备开始绘制新的路径
调用 arc() 方法，传入相应的参数
使用 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 实现渐变

渐变效果可以填充在矩形、圆形、线条、文本等画布元素中, 各种形状可以自己定义不同的颜色；渐变效果目前有两种：

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 #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 绘制图像

获取或者创建图像的dom对象
使用 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 绘制文本

使用 font 属性来定义字体
使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
使用 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>

执行一下

作者文档