在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. KMP算法的Next数组详解（转）

    转载请注明来源,并包含相关链接. 网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初我入门时看的博客吧: http://www.cnblogs.com/yjiyjige/p/3 ...

  2. loj1201（最大独立集）

    传送门:A Perfect Murder 题意:有一群苍蝇,之间有一些是朋友关系,如果杀了一只苍蝇,那么它的朋友们都会有警惕性,再也杀不了这些朋友了,问最多能杀多少只苍蝇. 分析:根据朋友性连边,最多 ...

  3. TBDR缺点

    TBDR全称Tile-based Deferred Rendering.它是Power VR独特的TBR技术的一种延伸实现手段.TBR/TBDR通过将每一帧画面划分成多个矩形区域,并对区域内的全部像素 ...

  4. 敏捷开发-Scrum 真实

    近期研究前 Scrum 数据编译的文件,在接下来的团队和项目开发.项目根据该引入 Scrum 一些练习,提高团队成员和项目之间的交付质量的合作. 参考资料: <轻松Scrum之旅-敏捷开发故事& ...

  5. js快速分享代码

    这是一款简单易用的文章分享工具,您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能.如果您想分享你的博客.个人网站或者企业网站等等,下面是两款不错的分享工具,值得拥有! 1. <d ...

  6. windows server 搭建radius服务器

    使用ISA 2004搭建PPTP/L2TP 服务器后,VPN账号是在radius服务器上的,使用window server 2003搭建radius服务器,需要添加组件->internet验证服 ...

  7. C# 使用Tuple传递多个参数

    Tuple是基于.NET Framework 4.0 及以上版本才有的.微软称它为元组,如果有三个参数那就是三元组.如 Tuple(T1, T2, T3) Tuple的命名空间在 System 很短吧 ...

  8. iScreenLocker 3.1.8 安卓锁屏通知--苹果一样的体验

    *软件介绍: 苹果锁屏通知(iScreenLocker)是一款android上ios风格的锁屏软件.它颠覆安智通知设计,将原来状态栏的通知搬到锁屏界面上来,能够在桌面轻松收发短信,微博,微信等消息.它 ...

  9. Java 二次MD5 32位小写加密算法与php页面加密结果相同

    最近做的一个项目需要使用MD5加密算法,需要加密的参数有两个.自己先试了几次,算的结果为php页面的不一样,后来与写php页面的同事沟通后,了解到php页面的算法如下: action = " ...

  10. Javascript Base64编码与解码

    原文:[转]Javascript Base64编码与解码 <html> <head> <META HTTP-EQUIV="MSThemeCompatible&q ...