您现在的位置是：首页> 前端问题 > 正文

HTML5 Canvas画布绘制你的理想

时间： 2024-09-06 14:41:10 来源：网络作者：自由分类：前端问题

简介：

HTML5 的 canvas 标签元素让开发者可以使用 JavaScript 在网页上动态的绘制和处理图形

一、什么是 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 来完成，按照如下步骤即可：

使用dom通过id获取canvas对象：var c=document.getElementById("myCanvas");
创建画布的上下文对象 context（此对象是HTML5 的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，使用getContext("2d") 函数来获取）准备绘制：var ctx=c.getContext("2d");
使用上下文对象 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 的矩形图形

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>

标签：HTML 5基础入门

文章声明

本文标题: HTML5 Canvas画布绘制你的理想

上一篇：HTML5初期了解

下一篇：element ui实现前台打印功能