<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,img,canvas {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #000;

 }

 #can {

     background: #FFF; display: block; margin: 25px auto; border-radius: 2px;

 }

 </style>

 <script type='text/javascript'>

     $( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         var img = document.createElement( 'img' );

         oCan.beginPath();

         oCan.fillStyle = getRandomColor();

         //oCan.fillRect( 15 , 25 , 100 , 100 );    /* 用来判定剪切的范围作用在之后的图形中 */

         oCan.rect( 20 , 50 , 30 , 150 ); /* 划定剪切的范围 */

         oCan.clip(); /* 创建一个剪切区域,将以后绘制的图形全部限制到剪切区域中,没有直接的方法把当前的剪切区域设置为画布的范围；要做到这一点，必须保存和恢复画布的整个图形状态。

          */

         oCan.fillRect( 20 , 50 , 100 , 100 );

         $( 'body' ).get( 0 ).appendChild( img ).src = can.toDataURL(); /* 首先这个方法是canvas画布的方法而非绘图环境的,其次导出的是画布的64Base编码路径格式为PNG,再次在Googel FIrefox 等浏览器中可以直接使用邮件将图片导出为PNG格式 */

         function getRandomColor(){

             var num = '0xFFFFFF';

             var len = Math.ceil( Math.random() * parseInt( num , 16 ) ).toString( 16 );

             if( length < 6 ){

                 for( var i = 0 ; i < 6 - len.length ; i++ ){

                     len += '0';

                 }

             }

             return '#' + len;

         }

     } );

 </script>

 </head>

 <body>

     <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器,以获取更好的体验效果...</canvas>

 </body>

 </html>

[ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示的更多相关文章

  1. javascript的函数、创建对象、封装、属性和方法、继承

    转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...

  2. JavaScript 中那些关于坐标和距离的属性与方法

    一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又 ...

  3. JavaScript之Number、String、Array常用属性与方法手册

    Number isFinite函数 Number.isFinite() 方法用来检测传入的参数是否是一个有穷数(finite number). 语法: Number.isFinite(value) 例 ...

  4. javaScript 中的私有，共有，特权属性和方法

    function constructor () { var private_v; // 私有属性 var private_f = function () { // 私有方法 // code }; th ...

  5. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  6. javascript面向对象（给对象添加属性和方法的方式）

    1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法         var g ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  9. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

随机推荐

  1. Legolas工业自动化平台入门（一）搭建应用

    前两篇给大家介绍了TWaver家族的新面孔--Legolas工业自动化平台,通过两个应用案例钻井平台工程用车和水源地监控系统,相信大家对Legolas已经有了一定程度的了解.这几篇文章,我们会逐步介绍 ...

  2. CyanogenMod wiki reading tips | Android tips

    To Enable the Developer and Performance settings on CyanogenMod 10.1 In the Settings app, choose the ...

  3. 个人对joomla3.2x和joomla2.5X浅薄看法

    很久没有写joomla文章了,发现想写的东西还是挺多的,后面抽时间补回来,其实更多还是php的一些东西.joomla3.0以后系统改变挺大,后台都是用bootstrap作为主题,个人对这个无爱,因为他 ...

  4. ActionLink()与jquery更好地结合建造MVC网页：

    众所周知,微软的MVC框架提供了一系列Helper以用于创建Ajax的网页. 但是,类似于Ajax.ActionLink()的方法创建的Ajax缺乏足够的灵活性,例如: 页面上有很多选项,我们需要根据 ...

  5. ASP.NET MVC数组模型绑定

    在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例: <input type="text" name ...

  6. [转载]SharePoint 2013搜索学习笔记之自定义结果源

    搜索中心新建好之后在搜索结果页上会默认有所有内容,人员,对话,视频这四个结果分类,每个分类会返回指定范围的搜索结果,这里我再添加了部门日志结果分类,搜索这个分类只会返回部门日志内容类型的搜索结果,要实 ...

  7. [转载]AxureRP 7超强部件库下载

    很多刚刚开始学习Axure的朋友都喜欢到网上搜罗各种部件库(组件库)widgets library ,但是网络中真正实用的并且适合你使用的少之又少,最好的办法就是自己制作适合自己工作内容的部件库. 这 ...

  8. 20套新鲜出炉的免费 PSD 格式的图标《免费下载》

    在网页设计中,设计师专注于每一个领域的设计,包括颜色选择.图标.创造力.混色等.正确的选择图标可以使他们的设计脱颖而出,看起来令人震惊.在 Web 设计领域,图标发挥非常重要的作用,因为美丽的和创造性 ...

  9. php动态获取函数参数

    PHP 在用户自定义函数中支持可变数量的参数列表.其实很简单,只需使用 func_num_args() , func_get_arg() ,和 func_get_args()  函数即可. 可变参数并 ...

  10. redis的备份

    了解redis的朋友应该知道它有两种数据持久化的方式,这里我作一个简单的介绍,AOF(append only  file)和RDB. 1.RDB 这是一种比较常见的方式,采用 写时复制 的方式,效率高 ...