HTML5 canvas 图形标签的用法快速入门

怼烎@ 2023-01-09 12:33 180阅读 0赞

### HTML5 canvas 图形标签的用法快速入门 ###

canvas就是画布，是一个矩形区域，用于在网页上绘制2D图形和图像。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas坐标体系

电脑上的坐标系和数学上的坐标系稍微有点不同，坐标的原点在绘制区域（这里是Canvas）的左上角，X轴正向朝右，Y轴正向朝下，如下图:

![20210121095029388.png][]

起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)。

首先概要说明使用HTML5 canvas绘图的方法步骤

<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。如：

使用javascript在<canvas>>元素上绘图主要有三步：

获取<canvas>元素对应的DOM对象，这是一个Canvas对象；如：

var canvas = document.getElementById("MyCanvas ");

调用Canvas对象的getContext()方法，得到一个CanvasRenderingContext2D对象；如：

var context = canvas.getContext("2d");

调用CanvasRenderingContext2D对象进行绘图。如画一条直线：

//设置对象起始点和终点

context.moveTo(10,10);

context.lineTo(200,200);

下面给出比较完整的代码

<!DOCTYPE html>

<head>

<title>canvas绘图演示</title>

<style>

\#canvas\{

border: 1px solid \#ADACB0;

display: block;

margin: 20px auto;

</style>

</head>

<body>

你的浏览器还不支持canvas

</canvas>

</body>

var canvas = document.getElementById("MyCanvas");

var context = canvas.getContext("2d");

//设置对象起始点和终点

context.moveTo(10,10);

context.lineTo(200,200);

//设置样式

context.lineWidth = 2; //线宽

//绘制

context.stroke();

</script>

</html>

保存文件名为：CanvasDemo.html，用浏览器打开，效果如下图（我的保存路径D:\\HTML5\_canvas示例）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

**创建 Canvas 元素**

向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：

提示：canvas的默认宽高是300\*150，单位都是 px。

**例1**、创建画布（Canvas）代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5Canvas示例1</title>  
<style type="text/css">  
canvas \{  
    border: 1px solid black;  
\}  
</style>  
</head>  
<body>  
  
<canvas id="tutorial" width="300" height="300"></canvas>

</script>  
</body>  
</html>

保存文件名为：CanvasDemo1.html，用浏览器打开，效果如下图（我的保存路径D:\\HTML5\_canvas示例）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

**绘制长方形**

上面的例1中，画布是空白的，那么如何中其中绘制图形呢？

先看canvast 提供了三种方法绘制矩形方法：

1、fillRect(x, y, width, height)：绘制一个填充的矩形。

2、strokeRect(x, y, width, height)：绘制一个矩形的边框。

3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

说明：这 3 个方法具有相同的参数。

x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

width, height：指的是绘制的矩形的宽和高。

**例2**、绘制两个长方形

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5Canvas示例2</title>  
<style type="text/css">  
canvas \{  
    border: 1px solid black;  
\}  
</style>  
</head>  
<body>  
  
<canvas id="tutorial" width="300" height="300"></canvas>  
<script>  
function draw()\{  
    var canvas = document.getElementById('tutorial');  
    if(!canvas.getContext) return;  
    var ctx = canvas.getContext("2d");  
    ctx.fillStyle = "rgb(200,0,0)";  
      //绘制矩形  
    ctx.fillRect (10, 10, 55, 50);  
   
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
    ctx.fillRect (30, 30, 55, 50);  
\}  
draw();

</body>  
</html>

保存文件名为：CanvasDemo2.html，用浏览器打开，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

**绘制线段**

需要用到的方法：

beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中

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

fill() 通过填充路径的内容区域生成实心的图形

例3、绘制三角形  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5Canvas示例3</title>  
<style type="text/css">  
canvas \{  
    border: 1px solid black;  
\}  
</style>  
</head>  
<body>  
  
<canvas id="tutorial" width="300" height="300"></canvas>  
<script>  
//JavaScript 代码  
function draw()\{  
    var canvas = document.getElementById('tutorial');  
    if(!canvas.getContext) return;  
    var ctx = canvas.getContext("2d");  
    //绘制3角形  
    ctx.beginPath(); //新建一条path  
    ctx.moveTo(50, 50);  //把画笔移动到指定的坐标  
    ctx.lineTo(200, 50);  
    ctx.lineTo(200, 200);  
    ctx.closePath(); //闭合路径，会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做  
    ctx.stroke(); //绘制路径——描边  
\}  
draw();  
</script>  
</body>  
</html>

保存文件名为：CanvasDemo3.html，用浏览器打开，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

**绘制圆弧**

有两个方法可以绘制圆弧：

1、arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

注意：

这里的度数都是弧度。角度转换成弧度：radians=(Math.PI/180)\*degrees

0 弧度是指的 x 轴正方向。

2、arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

**例4**、绘制圆弧源码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5Canvas示例4</title>  
<style type="text/css">  
canvas \{  
    border: 1px solid black;  
\}  
</style>  
</head>  
<body>  
  
<canvas id="tutorial" width="300" height="300"></canvas>  
<script>  
//JavaScript 代码  
function draw()\{  
    var canvas = document.getElementById('tutorial');  
    if(!canvas.getContext) return;  
    var ctx = canvas.getContext("2d");  
    //绘制3角形  
    ctx.beginPath(); //新建一条path  
    ctx.arc(100,100,80,0\*Math.PI/180,270\*Math.PI/180);  //设置路径  
    ctx.lineWidth=2; //设置轮廓粗细，ctx.strokeStyle="orange"; 轮廓样式 ctx.fillStyle='azure';设置内部填充样式  
    //ctx.closePath(); //闭合路径，会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做  
    ctx.stroke(); //绘制路径——描边  
\}  
draw();  
</script>  
</body>  
</html>

保存文件名为：CanvasDemo4.html，用浏览器打开，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

上述还只是能静态的画图，下面介绍如何实现拖动鼠标动态地画图。

**实现铅笔功能**

canvas不能画点。使用lineTo在一个很细微的粒度下，所以肉眼看起来还算是平滑的曲线。首先设置两个数组clickX, clickY，然后监听鼠标在canvas上面的点击-移动-松开这一系列事件，把该过程中的所经过的所有点的坐标写进刚刚的两个数组里。写完之后再用一个方法取出数组的内容把刚刚的路线画出来。状态量sPainting来标志用户是不是真的在画。使用到了四个：mousedown（鼠标按下）mouseup（鼠标松开）mousemove（鼠标移动）mouseout（鼠标离开）.从字面意思就很好理解，分别是鼠标按下、松开、移动、离开时就会触发。

**例5**、canvas铅笔功能——拖动鼠标动态地画图

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5Canvas示例5</title>  
<style type="text/css">  
canvas \{  
    border: 1px solid black;  
\}  
</style>  
</head>  
<body>  
  
<canvas id="myCanvas" width="600" height="400"></canvas>  
<script>  
//JavaScript 代码  
var canvas, context,    
　　  isPainting,    
　　  clickX, clickY, clickDrag;    
　　    
　　var mouseDown = function(e)\{    
　　  var mouseX = e.pageX;    
　　  var mouseY = e.pageY;    
　　  isPainting = true;    
　　  addClick(mouseX, mouseY, false);    
　　  redraw();    
　　\}    
　　var mouseUp = function(e)\{    
　　  isPainting = false;    
　　  redraw();    
　　\}    
　　var mouseMove = function(e)\{    
　　  if(isPainting)\{    
　　      var mouseX = e.pageX;    
　　      var mouseY = e.pageY;    
　　      addClick(mouseX, mouseY, true);    
　　      redraw();    
　　  \}    
　　    
　　\}    
　　var mouseOut = function(e)\{    
　　  isPainting = false;    
　　\}    
　　    
　　function addClick(mouseX, mouseY, isDragging)\{    
　　  clickX.push(mouseX);    
　　  clickY.push(mouseY);    
　　  clickDrag.push(isDragging);    
　　\}    
　　    
　　//重绘    
　　function redraw()\{    
　　  context.clearRect (0 , 0, canvas.width , canvas.height );    
　　  context.strokeStyle = "\#000000";    
　　  var numOfPts = clickX.length;    
　　  for(var i=0; i<numOfPts; i++)\{    
　　      context.beginPath();    
　　      if(clickDrag\[i\])\{    
　　          context.moveTo(clickX\[i-1\], clickY\[i-1\]);    
　　          context.lineTo(clickX\[i\], clickY\[i\]);    
　　      \}else\{    
　　          context.arc(clickX\[i\], clickY\[i\], 0.5, 0, 2\*Math.PI, true);    
　　      \}    
　　      context.closePath();    
　　      context.stroke();    
　　  \}    
　　\}    
　　    
　　//初始化    
　　function init()\{    
　　  canvas = document.getElementById("myCanvas");    
　　  context = canvas.getContext("2d");    
　　  isPainting = false;    
　　  clickX = new Array();    
　　  clickY = new Array();    
　　  clickDrag = new Array();    
　　  //鼠标事件    
　　  canvas.onmousedown = mouseDown;    
　　  canvas.onmouseup = mouseUp;    
　　  canvas.onmousemove = mouseMove;    
　　  canvas.onmouseout = mouseOut;    
　　\}    
　　    
　　window.onload = init();

</script>  
</body>  
</html>

保存文件名为：CanvasDemo5.html，用浏览器打开，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

有了上述基础，再进一步学习就可以少受挫折了。

最后，给出一个可以换一些颜色和笔迹粗细的代码，拖动鼠标动态地画图。

**例6**、可以换一些颜色和笔迹粗细的代码，拖动鼠标动态地画图的例子，先给出效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

代码如下：

<!DOCTYPE html>  
<html >  
<head>  
    <meta charset="UTF-8">  
    <title>HTML5Canvas示例6</title>  
    <script>  
        var bot;//画布div  
        var X,Y,X1,Y1;//坐标  
        var flag=0;  
        var time;//定时器ID  
        var color=0;//记住所选颜色  
        var lineW=2;//画笔粗细  
        var canvas;//创建画布  
        var context;//获取上下文  
        var isMouseDown=false;//记录鼠标是否按下  
   
        window.οnlοad=function()\{  
            //创建画布  
            canvas=document.getElementById("can");  
            //获取上下文  
            context=canvas.getContext("2d");  
            bot=document.getElementById("bottom");  
            bot.οnmοusedοwn=mouseDownAction;  
            bot.οnmοusemοve=mouseMoveAction;  
            document.οnmοuseup=mouseUpAction;  
        \}  
   
        /\*\*  
         \*选中画笔颜色  
         \*/  
        function pen\_click(num)\{  
            var chk=document.getElementsByTagName("input");  
            for(var i=0;i<chk.length;i++)\{  
                if(i==num)\{  
                    chk\[i\].checked=true;  
                    color=i;  
                \}else \{  
                    chk\[i\].checked="";  
                \}  
            \}  
        \}  
   
        /\*\*  
         \* 画笔粗细  
         \*/  
        function line\_wid(num)\{  
            lineW=num;  
        \}  
   
        /\*\*  
         \*鼠标按下  
         \*/  
        function mouseDownAction(e)\{  
            isMouseDown=true;  
            //记录下鼠标点击的时候的位置  
            X= e.offsetX;  
            Y= e.offsetY;  
        \}  
   
        /\*\*  
         \*鼠标移动  
         \*/  
        function mouseMoveAction(e)\{  
            if(isMouseDown)\{  
                X1= e.offsetX;  
                Y1= e.offsetY;  
                drowline(X,Y,X1,Y1);  
                flag++;  
            \}  
        \}  
   
        /\*\*  
         \*鼠标弹起来  
         \*/  
        function mouseUpAction(e)\{  
            isMouseDown=false;  
            flag=0;  
        \}  
   
        /\*\*  
         \* 绘制  
         \*/  
        function drowline(num1,num2,num3,num4)\{  
            //开启新的路径  
            if(flag)  
                context.beginPath();  
            //移动画笔的初始位置  
            context.moveTo(num1,num2);  
            context.lineWidth=lineW;  
            if(color==0)\{  
                context.strokeStyle="red";  
            \}else if(color==1)\{  
                context.strokeStyle="green";  
            \}else if(color==2)\{  
                context.strokeStyle="blue";  
            \}  
            //移动画笔的结束位置  
            context.lineTo(num3,num4);  
            //开始绘制  
            context.stroke();  
   
            if(flag!=0)\{  
                X=X1;  
                Y=Y1;  
            \}  
        \}

function clear\_pic()\{//清除画布  
            context.clearRect(0,0,600,400);  
        \}

</script>  
</head>  
<body>  
<div id="left">  
    <div id="top">  
        <div class="top\_left">  
            <img src="img/pen\_red.gif" style="border: 2px solid transparent" οnclick="pen\_click(0)"><input type="checkbox" style="position: absolute;top: 38px;left: 48px" checked οnclick="pen\_click(0)">  
            <img src="img/pen\_green.gif" style="border: 2px solid transparent" οnclick="pen\_click(1)"><input type="checkbox" style="position: absolute;top: 38px;left: 95px" οnclick="pen\_click(1)">  
            <img src="img/pen\_blue.gif" style="border: 2px solid transparent" οnclick="pen\_click(2)"><input type="checkbox" style="position: absolute;top: 38px;left: 142px" οnclick="pen\_click(2)">  
        </div>  
        <div class="top\_right">  
            <img src="img/pen\_thin.gif" οnclick="line\_wid(2)">  
            <img src="img/pen\_medium.gif" οnclick="line\_wid(4)">&nbsp;&nbsp;&nbsp;  
            <img src="img/pen\_thick.gif" οnclick="line\_wid(8)">  
        </div>  
    </div>  
    <div id="bottom">  
        <canvas id="can" width="600" height="400"></canvas>  
    </div>  
</div>

</style>  
</html>

保存文件名为：CanvasDemo6.html，用浏览器打开可以试试效果。

注意，在CanvasDemo6.html文件所在的位置，建立一个img文件夹，包含如下图片

![20210121153925770.png][]

[20210121095029388.png]: /images/20221119/ef5ff9553995444e814db1a7293ca847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221119/b562e674149040f79c2992d678d6958a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210121095113793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021012109530128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210121095435622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210121095544939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210121100059752.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210121153856761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM=,size_16,color_FFFFFF,t_70
[20210121153925770.png]: https://img-blog.csdnimg.cn/20210121153925770.png