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

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

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

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <html>
  4.    <body>
  5.    	  <canvas  width="500" height="500" id="canvas" style="background:yellow">
  6.    	         您的浏览器不支持canvas
  7.    	  </canvas>
  8.    	  <script>
  9.            //获取画布
  10.            var canvas=document.getElementById('canvas');
  11.            //alert(canvas);
  12.            //设置绘图环境
  13.            var cxt=canvas.getContext('2d');
  14.            //画一条线段
  15.                //开始新路径，第一笔可以不写
  16.                 cxt.beginPath();
  17.                //设置画笔宽度
  18.                  cxt.lineWidth=4;
  19.                //设置画笔颜色
  20.                  cxt.strokeStyle="red";
  21.                  //笔从哪开始画
  22.                  cxt.moveTo(20,20);
  23.                  //给出终点
  24.                  cxt.lineTo(100,20);
  25.                  //开始画
  26.                  cxt.stroke();
  27.                  //封闭路径
  28.                  cxt.closePath();
  29.            //画空心圆
  30.                 //开始新路径
  31.                 cxt.beginPath();
  32.                 //路径函数 x,y,r,角度范围,顺时针/逆时针
  33.                 cxt.arc(100,100,50,0,360,false);
  34.                 cxt.stroke();
  35.                 cxt.closePath();
  36.            //画实心圆
  37.                 cxt.beginPath();
  38.                 //设置填充颜色
  39.                 cxt.fillStyle="blue";
  40.                 cxt.arc(100,200,50,0,360,false);
  41.                 //实心
  42.                 cxt.fill();
  43.                 //在画个圆，不填充，加边框，可不画
  44.                 cxt.stroke();
  45.                 cxt.closePath();
  46.            //画矩形
  47.                 //矩形函数 x,y,长宽
  48.                 cxt.beginPath();
  49.                 cxt.rect(200,100,50,60);
  50.                 cxt.stroke();
  51.                 cxt.closePath();
  52.                 //其他方法
  53.                 cxt.beginPath();
  54.                 cxt.strokeRect(200,190,120,20);
  55.                 cxt.closePath();
  56.                 //实心矩形
  57.                 cxt.beginPath();
  58.                 cxt.rect(200,220,50,50);
  59.                 cxt.fill();
  60.                 cxt.closePath();
  61.                 //其他方法
  62.                 cxt.fillRect(200,280,50,50);
  63.             //写字
  64.                 cxt.font="40px 黑体 ";
  65.                 //实心字
  66.                 cxt.fillText("暗伤无痕",300,50);
  67.                 //空心字
  68.                 //将笔触调细
  69.                 cxt.lineWidth="1";
  70.                 cxt.strokeText("暗伤无痕",300,100);
  71.             //将图片画到画板上  猎豹不支持
  72.                 var img=new Image();
  73.                 img.src="1.jpg";
  74.                 cxt.drawImage(img,300,400,100,100);
  75.             //画一个三角形
  76.                  cxt.beginPath();
  77.                  //移动至开始点
  78.                  cxt.moveTo(300,100);
  79.                  cxt.lineTo(300,200);
  80.                  cxt.lineTo(350,150);
  81.                  cxt.closePath();//三角形需要先闭合路径再画
  82.                  //空心
  83.                  //cxt.stroke();
  84.                  //实心
  85.                  cxt.fill();
  86.             //旋转图片
  87.                 //设置旋转环境
  88.                 cxt.save();
  89.                    //在异次元空间重置0,0点位置
  90.                    cxt.translate(20,20);
  91.                 //图片/x形状旋转
  92.                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
  93.                     //
  94.                     cxt.rotate(-30*Math.PI/180);
  95.                     //旋转线段
  96.                  cxt.beginPath();
  97.                  cxt.lineWidth=4;
  98.                  cxt.moveTo(0,0);
  99.                  cxt.lineTo(20,100);
  100.                  cxt.stroke();
  101.                  cxt.closePath();
  102.                 //将旋转后的图片返回原画布
  103.                 cxt.restore();
  104.    	  </script>
  105.    </body>
  106. </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. delphi 回调函数

    program Project2; {$APPTYPE CONSOLE} uses SysUtils; type //定义一个对象事件方法 TCallbackFunc = function (i: I ...

  2. [poj 2991]Crane[线段树表示向量之和,而非数量]

    题意: 起重机的机械臂, 由n段组成, 对某一些连接点进行旋转, 询问每次操作后的末端坐标. 思路: 由于旋转会影响到该点之后所有线段的角度, 因此容易想到用线段树记录角度, 成段更新. (但是不是每 ...

  3. 【WinRT】【译】【加工】在 XAML 中制作圆形图片

    原文:[WinRT][译][加工]在 XAML 中制作圆形图片 原文地址:http://timheuer.com/blog/archive/2015/05/06/making-circular-ima ...

  4. 再读TCP/IP网络7层协议

    随着工作的深入,每次读这7层协议,每次都有不同的理解. 分层名                                                               分层号   ...

  5. [置顶] Firefox OS 学习——manifest.webapp结构分析

    在Firefox OS 学习——Gaia 编译分析  这篇文章多次提到manifest.webapp文件,对于做过android app 开发的人来说,都很熟悉Android.mk 和Manifest ...

  6. 使用javaDate类代数据仓库维度表

    使用javaDate类代数据仓库维度表 Date类别: ,返回一个相对日期的毫秒数.精确到毫秒.但不支持日期的国际化和分时区显示. Date 类从Java 开发包(JDK)1.0 就開始进化,当时它仅 ...

  7. Axure RP 实践.1

    工作需要设计产品原型,找来Axure RP帮忙,看了一些文章,其中下面这段话深得我心. “只使用Axure的默认控件(Wireframe),不要用那些样式花哨的自定义控件,并且所有页面中使用的颜色不能 ...

  8. 获取webshell的十种方法

    黑客在入侵企业网站时,通常要通过各种方式获取webshell从而获得企业网站的控制权,然后方便进行之后的入侵行为.本篇文章将如何获取webshell总结成为了十种方法,希望广大的企业网络管理员能够通过 ...

  9. The Django template language 阅读批注

    The Django template language About this document This document explains the language syntax of the D ...

  10. Java利用httpasyncclient进行异步HTTP请求

    Java利用httpasyncclient进行异步HTTP请求 前段时间有个需求在springmvc mapping的url跳转前完成一个统计的业务.显然需要进行异步的处理,不然出错或者异常会影响到后 ...