《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.2 常用标签 （下）

5．canvas> 标签

Canvas API 提供了一种通过 JavaScript 和HTML 的canvas> 元素来绘制图形的方式，它可

以用于动画、游戏画面、数据可视化、图片编辑及实时视频处理等方面的内容。使用canvas> 大

概可以分为两个步骤。

首先，在 HTML 文档中定义canvas> 标签，如代码清单 2-12 所示。

代码清单 2-12

canvas width="500" height="500" style="border: 1px solid red" id="canvas">
    /c
anvas>
    

canvas> 标签只有两个属性——width 和 height。当没有设置宽度和高度的时候，canvas>

会初始化尺寸为 300×150 的矩形。

然后，获取canvas> 对象的上下文并判断 getContext()方法是否存在，如代码清单 2-13所示。

代码清单 2-13

var canvas = document.getElementById("canvas")
if (canvas.getContext){
    
var ctx = canvas.getContext("2d");

}
    

最后，在页面中分别绘制圆形、直线和矩形框，如代码清单 2-14 所示。

代码清单 2-14

!DOCTYPE html>
    
html lang="en">
    
head>
    
meta charset="UTF-8">
    
title>
    canvas Demo/title>
    
/head>
    
body>
    
canvas width="500" height="500" style="border: 1px solid red" id="canvas">
    /c
anvas>
    
script>

var canvas = document.getElementById("canvas")
if (canvas.getContext){
    
var ctx = canvas.getContext("2d");

//画圆
ctx.beginPath()
ctx.moveTo(250,100)
ctx.arc(250,100,10,0,2*Math.PI)
ctx.fillStyle = "blue"
ctx.fill()
ctx.closePath()
//画直线
ctx.beginPath()
ctx.moveTo(100,250)
ctx.lineTo(400,250)
ctx.strokeStyle = "green"
ctx.stroke()
ctx.closePath()
//画矩形
ctx.beginPath()
ctx.rect(100,300,300,100)
ctx.strokeStyle = "aqua"
ctx.stroke()
ctx.closePath()
}
    
/script>
    
/body>
    
/html>
    

运行结果如图 2-21 所示。

接下来，我们介绍上述代码中用到的相关 API 方法。

• beginPath()：通过清空子路径列表开始一条新的路径，其调用方法为 CanvasRenderingContext2D.beginPath()。

• closePath()：将笔点返回当前子路径的起始点，并从当前点到起始点绘制一条直线，如果图形已经是封闭图形或仅有一个点，此方法不做任何操作。

• moveTo(x,y)：将一条新的子路径的起点移动到(x,y)。

• lineTo(x,y)：使用直线连接子路径的终点与(x,y)。

• arc(x,y,radius,startAngle,endAngle,anticlockwise)：绘制圆心坐标为(x,y)、半径为 radius的弧，根据 anticlockwise（默认为顺时针）指定的方向从 startAngle 开始绘制，到endAngle 结束。

• stroke()：通过线条来绘制图形轮廓。

• fill()方法：根据填充路径的内容区域生成实心的图形。

另外，我们可以通过指定 strokeStyle 的值设置图形轮廓的颜色；通过指定 fillStyle 的值设置图形的填充颜色，默认值均为黑色（#000000）。

最后，结合代码清单 2-15，介绍指针设备（如鼠标指针）在canvas> 对象中移动时触发的事件 mousemove。

代码清单 2-15

!DOCTYPE html>
    
html lang="en">
    
head>
    
meta charset="UTF-8">
    
title>
    你画我猜（MNIST 手写数字版）canvas 示例/title>
    
/head>
    
body>
    
canvas width="500" height="500" style="border: 1px solid red" id="canvas">
    /c
anvas>
    
button id="clear">
    清除画布/button>
    
script>

var canvas = document.getElementById("canvas")
var oclear = document.getElementById("clear")
if (canvas.getContext){
    
var ctx = canvas.getContext("2d");
    
canvas.onmousemove = (e) =>
 {

if(e.buttons == 1){

ctx.fillStyle = "black"
  ctx.fillRect(e.offsetX,e.offsetY,5,5)
}

}
    
oclear.onclick = () =>
 {

ctx.clearRect(0,0,500,500)
}

}
    
/script>
    
/body>
    
/html>
    

运行结果如图 2-22 所示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！