首页 > 代码库 > 玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

2024-07-02 07:57:03   223人阅读

在html5中可以使用canvas标签在画布上画图，先直接上代码，这篇文章先简单介绍一下canvas的使用方法，简单画几个圆，矩形，三角形，写字。

在代码中均给出了注释，在这里特别强调的一点是：使用canvas画图时有时候必须beginPath和colsePath,但有时不需要，为了防止出现问题，可以在每次重新画一个图时重新开启路径，画完后关闭路径。

这些代码是在猎豹浏览器上实现的，有些浏览器可能不支持。

<!DOCTYPE html>
<meta charset="utf-8">
<html>
   <body>
   	  <canvas  width="500" height="500" id="canvas" style="background:yellow">     
   	         您的浏览器不支持canvas
   	  </canvas>
   	  <script>
           //获取画布
           var canvas=document.getElementById(‘canvas‘);
           //alert(canvas);
           //设置绘图环境
           var cxt=canvas.getContext(‘2d‘);
           //画一条线段
               //开始新路径，第一笔可以不写
                cxt.beginPath();
               //设置画笔宽度
                 cxt.lineWidth=4;
               //设置画笔颜色
                 cxt.strokeStyle="red";
                 //笔从哪开始画
                 cxt.moveTo(20,20);
                 //给出终点
                 cxt.lineTo(100,20);
                 //开始画
                 cxt.stroke();
                 //封闭路径
                 cxt.closePath();
           //画空心圆
                //开始新路径
                cxt.beginPath();
                //路径函数 x,y,r,角度范围,顺时针/逆时针
                cxt.arc(100,100,50,0,360,false);
                cxt.stroke(); 
                cxt.closePath();
           //画实心圆
                cxt.beginPath();
                //设置填充颜色
                cxt.fillStyle="blue";
                cxt.arc(100,200,50,0,360,false);
                //实心
                cxt.fill();
                //在画个圆，不填充，加边框，可不画
                cxt.stroke(); 
                cxt.closePath(); 
           //画矩形
                //矩形函数 x,y,长宽
                cxt.beginPath();
                cxt.rect(200,100,50,60);
                cxt.stroke(); 
                cxt.closePath();
                //其他方法
                cxt.beginPath();
                cxt.strokeRect(200,190,120,20);
                cxt.closePath();
                //实心矩形
                cxt.beginPath();
                cxt.rect(200,220,50,50);
                cxt.fill();
                cxt.closePath();
                //其他方法
                cxt.fillRect(200,280,50,50);
            //写字
                cxt.font="40px 黑体 ";
                //实心字
                cxt.fillText("暗伤无痕",300,50);
                //空心字
                //将笔触调细
                cxt.lineWidth="1";
                cxt.strokeText("暗伤无痕",300,100);
            //将图片画到画板上  猎豹不支持
                var img=new Image();
                img.src=http://www.mamicode.com/"1.jpg"; >


联系
我们