在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. 3xx Redirection

    3xx Redirection This class of status code indicates the client must take additional action to comple ...

  2. Load and Unload

    一.前言 在前一段时间,我遭遇了一个现象诡异的Bug,最后原因归结为在DllMain里错误地调用了FreeLibrary(在本文最后对此Bug有详细的解释). MSDN里关于禁止在DllMain里调用 ...

  3. 开启cocos2dx 3.0的Console功能

    下面内容用于自己知识的备忘,想看具体内容,请參照例如以下地址. 原英文文地址: http://discuss.cocos2d-x.org/t/cocos3-0-tutorial-console-tut ...

  4. 慕尼黑大学公开课 Competitive Strategy（竞争策略）总结

    第一章博弈 同时的博弈:双方同时定制策略 如果有显著的次优策略总是不如另一个,则剔除它. 如果一个策略组合中没有一方可以单独改变其策略以提高回报,则称为Nash均衡.一个游戏可能没有也可能有多个Nas ...

  5. MySQL的Master/Slave群集安装和配置

    本文介绍MySQL的Master/Slave群集安装和配置,版本号安装最新的稳定版GA 5.6.19. 为了支持有限HA.我们用Master/Slave读写简单孤立的集群.有限HA这是当Master不 ...

  6. 极路由1s，固件需要刷入RipOS系统的加40块

    极路由1s,固件需要刷入RipOS系统的加40块,集成wifidog功能,wifi广告路由器的理想选择功能. 经过测试,无线性能稳定,无线可带32个手机客户端. 具体配置: 7620CPU ,主频58 ...

  7. cocos2dx 制作单机麻将(一)

    今天開始打算解说下cocos2dx下怎样制作国标麻将 前半部分先解说麻将的逻辑部分,由于都是代码,可能会比較枯燥无聊. 这部分讲完后,你也能够用其它游戏引擎来制作麻将 后半部分,就解说余下的cocos ...

  8. 关于AIX VG中 LV 的状态问题，LV STATE

    在数据库管理过程中常常遇见LV状态异常,而造成LV不能再次被使用的情况,那么AIX中LV的两种状态分别代表什么呢 如果是访问fs需要open,即创建文件系统并mount 文件系统LV STATE 才是 ...

  9. 《Linux设备驱动开发具体解释(第3版)》进展同步更新

    本博实时更新<Linux设备驱动开发具体解释(第3版)>的最新进展. 2015.2.26 差点儿完毕初稿. 本书已经rebase到开发中的Linux 4.0内核,案例多数基于多核CORTE ...

  10. JS中 document.getElementById 对象

    Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...