请珍惜劳动小编成果，这篇文章是原来小编，转载请注明出处。

于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. 把图片画到画布上，适应PC和移动端

    画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...

  2. Android开发经验之获取画在画布上的字符串长度、宽度（所占像素宽度)

    Android中获取字符串长度.宽度(所占像素宽度) 计算出当前绘制出来的字符串有多宽,可以这么来! 方法1: Paint paint = new Paint(); Rect rect = new R ...

  3. 使用canvas 根据角度画圆弧

    最近收到一个需求,根据角度在平面上画出对应的区域,实际就是 以固定的原点,根据起始角度和结束角度和半径,画出他的区域. 写了一小段,试试 export class Draw {   construct ...

  4. 解决 canvas 下载含图片的画布时的报错

    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...

  5. 玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  6. HTML5中的 Canvas

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

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

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

  8. Canvas中如何画一条清晰的线宽为奇数（如1px逻辑像素）的线?

    我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的 ...

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

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

随机推荐

  1. 【HTML5游戏开发小技巧】RPG情形对话中，令文本逐琢夸出

    从前用JAVAscript完成过令文本逐琢夸出的效果,明天嗡炒用html5中的canvas完成一下.canvas里的内容可没有像<p>那样好操做,起首,您需求懂得一些html5的API才气 ...

  2. 使用jni技术进行android应用签名信息核查及敏感信息保护

           近期业余时间写了一款应用<摇啊摇>,安智.安卓.360等几个应用商店已经陆续审核通过并上线.从有想法到终于将产品做出来并公布,断断续续花了近二个半月的业余时间,整体来讲还算顺 ...

  3. 观察者模式（Observer Patterns）

    今天学习了观察者模式,做个总结,方便以后回想. 首先是定义:观察者模式就是定义对象之间一对多的依赖关系,当一个对象状态发生改变时,全部依赖他的对象都收到推送消息并自己主动更新做出改变. 我的理解:生活 ...

  4. 泛泰A870L/K/S第三版官方4.4.2原来的系统卡刷机包 (愿自己主动ROOT)

    采用suky大神ota具,来自官方的拍摄OTA包裹,未做任何改动, 使用官方recovery,还是我的头发中国TWRP 2.7.1.1 for A870 (己主动ROOT. 自己主动ROOT完后就自己 ...

  5. Java执行批处理.bat文件（有问题？？？求高手帮忙解答！！！）

                           Java执行批处理.bat文件(有问题???求高手帮忙解答!!!) 在项目开发中常常都会遇到需要在代码中调用批处理bat脚本,把自己在项目中遇到过的总结下 ...

  6. 解决android3.0版本号以上应用接收不到开机广播问题

    如今是2014-07-16 下午15:27. 好久没写过东西,突然间灵感喷发想写点东西(事实上是刚刚弄好了一个棘手的问题,自豪中..呵呵呵呵 我牛掰).废话不多说,进入正题. 不知道你们又没有碰到这问 ...

  7. 移植kl档，但调用默认Generic.kl解决的方法

    从飞机到现在移植模型来开发遥控器按键,调查发现,大部分的功能键始终没有任何效果. 跑 dumpsys input 要查看当前的关键kl, 查找KeyLayoutFile它原来是默认Generic.kl ...

  8. composite template 组合模式

      1. 主要优点 组合模式的主要优点如下: (1) 组合模式可以清楚地定义分层次的复杂对象,表示对象的全部或部分层次,它让客户端忽略了层次的差异,方便对整个层次结构进行控制. (2) 客户端可以一致 ...

  9. ExtJs迄今datefield控制设置默认值

    假设extjs4 datefield日期控件设置默认值.为当天的前一月,和后一月 Ext.Date.MONTH      月 Ext.Date.YEAR         年 Ext.Date.DAY  ...

  10. [Django] Base class in the model layer

    In the model layer, the Model class is the base class while the ModelBase class is metaclass.