网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > html5

用实例告诉你html5画图功能如何使用? 附源码

2021/4/2 21:35:57

在html5中可以使用canvas标签在画布上画图,我们先了解一下canvas标签的具体用法什么是 canvas?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。你可以通过多种方法使用 canv…

在html5中可以使用canvas标签在画布上画图,我们先了解一下canvas标签的具体用法

什么是 canvas?

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

<canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形。

在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。

image.png

下面我们通过实际的例子来简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。

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


image.png

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

<!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("www.woaidaogu.com",300,50);  
                //空心字  
                //将笔触调细  
                cxt.lineWidth="1";  
                cxt.strokeText("我爱捣鼓",300,100);  
            //将图片画到画板上  猎豹不支持  
                var img=new Image();  
                img.src="1.jpg";   
                cxt.drawImage(img,300,400,100,100);   
            //画一个三角形  
                 cxt.beginPath();  
                 //移动至开始点  
                 cxt.moveTo(300,100);  
                 cxt.lineTo(300,200);  
                 cxt.lineTo(350,150);  
                 cxt.closePath();//三角形需要先闭合路径再画  
                 //空心  
                 //cxt.stroke();  
                 //实心  
                 cxt.fill();  
            //旋转图片  
                //设置旋转环境  
                cxt.save();  
                   //在异次元空间重置0,0点位置  
                   cxt.translate(20,20);  
                //图片/x形状旋转  
                    //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180  
                    //  
                    cxt.rotate(-30*Math.PI/180);  
                    //旋转线段  
                 cxt.beginPath();  
                 cxt.lineWidth=4;  
                 cxt.moveTo(0,0);  
                 cxt.lineTo(20,100);  
                 cxt.stroke();  
                 cxt.closePath();  
                //将旋转后的图片返回原画布  
                cxt.restore();  
      </script>  
   </body>  
</html>


查看运行效果

通过该文章你是否对HTML5 <canvas> 元素有了进一步的认识,希望你能在今后的项目开发中灵活使用!

相关资讯

  • html5新增元素document.queryselector属性

    document.queryselector其实也不算是html5的新增元素,它只是继承了html4的属性,今天我们就来说说document.queryselector属性如何使用? 先看一个实例,结合实例分析一下:<!DOCTYPE html><html><head> <meta charset="UTF-8"&a…

    2021/5/9 14:06:38
  • html5身份证照片上传及预览缩略图-附源码

    html5页面上传图片很方便,主要用到了html5的FileReader方法,今天我们就通过身份证照片上传作为例子来说说它的用法。调用FileReader对象的方法FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功…

    2021/3/28 10:52:43
  • 用实例告诉你html5画图功能如何使用?附源码

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字。在代码中均给出了注释,在这里特别强调的一点是:使用canvas画图时有时候必须beginPath和colsePath,但有时不需要,为了防止出现问题…

    2021/3/21 14:51:36
  • 实例告诉您HTML5的WEB SQL数据库如何使用?含源码

    Web SQL数据库API实际上未包含在HTML 5规范之中,它是一个独立的规范,它引入了一套使用SQL操作客户端数据库的API。假设你是一名优秀的Web开发人员,那毫无疑问,你对SQL和数据库的相关概念已经很熟悉了,如果你对SQL不熟悉,那在继续阅读本文之前,最好先学习一下SQL相关…

    2021/3/9 22:21:35
  • HTML5如何实现浏览器页面全屏显示及退出全屏的效果?

    在越来越真实的web应用程序中,JavaScript也变得越来越给力.FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,如果交互完成,随时可以退出全屏状态.在线演示Demo: Fullscreen API Example(在此Demo中,可…

    2021/3/9 22:17:42