在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="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又一强大功能）的更多相关文章

  1. （转）第02节：在Canvas上画简单的图形

    我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...

  2. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  3. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  4. HTML5新标签<canvas>

    基本用法 首先在body中写个<canvas>,设定大小,个人建议大小要在行内设置,不然在部分情况下会发生错误. CSS部分 给canvas加个边框,这边框只是为了方便看出canvas的边 ...

  5. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  9. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

随机推荐

  1. IBinder在进程之间传递一个对象的形式(一)

    主张 什么时候service通常被称为远程时的,用到aidl来定一个接口供service和client来使用,这个事实上就是使用Binder机制的IPC通信.当client bind service成 ...

  2. Android UI布局TableLayout

    了解字面上TableLayout一个表格样式布局.这种布局将包括以行和列的形式的元件被布置.表格列的数目是列的各行中的最大数目.当然,表格里面的单元格它能够清空. 实例:LayoutDemo 执行效果 ...

  3. Java程序猿面试题集（181- 199）

    Java面试题集(181-199) 摘要:这部分是包括了Java高级玩法的一些专题,对面试者和新入职的Java程序猿相信都会有帮助的. 181.  182. 183. 184. 185. 186. 1 ...

  4. uva11426（莫比乌斯反演）

    传送门:GCD Extreme (II) 题意:给定n(n<=4000000),求G G=0 for(int i=1;i<n;i++) for(int j=i+1;j<=n;j++) ...

  5. Wix打包系列（二）用户界面和本地化操作

    原文:Wix打包系列(二)用户界面和本地化操作 上一章节,我们已经大概知道如何对文件进行打包安装,不过我们也注意到,通过对Sample.wxs的编译链接,生成的msi安装包没有任何用户界面,只有一个安 ...

  6. HTML5：footer定位（底部+居中）的探讨+div图片居中问题

    初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指 ...

  7. 第一个Python程序的Hello Python,竟然有问题

    print 'hello python' 运行时显示:SyntaxError: invalid syntax 解决办法: 这应该是版本的问题,Python2的话直接就可以输出,但是到了Python3需 ...

  8. Android JNI 获取应用程序签名

    使用Android JNI 获取应用程序签名. 获取基础上生成自己的签名password,这可以防止别人反编译找到自己的源代码password. jstring Java_com_masonsdk_j ...

  9. c++ cin>>详解

    参考地址:http://www.cnblogs.com/A-Song/archive/2012/01/29/2331204.html 程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当 ...

  10. HTML5----响应式（自适应）网页设计

    第一步:在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content="width=device-width, in ...