[ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示
<!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() 属性及方法演示的更多相关文章
- javascript的函数、创建对象、封装、属性和方法、继承
转自原文javascript的函数.创建对象.封装.属性和方法.继承 一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:functi ...
- JavaScript 中那些关于坐标和距离的属性与方法
一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又 ...
- JavaScript之Number、String、Array常用属性与方法手册
Number isFinite函数 Number.isFinite() 方法用来检测传入的参数是否是一个有穷数(finite number). 语法: Number.isFinite(value) 例 ...
- javaScript 中的私有,共有,特权属性和方法
function constructor () { var private_v; // 私有属性 var private_f = function () { // 私有方法 // code }; th ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- javascript面向对象(给对象添加属性和方法的方式)
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
随机推荐
- 十一、EnterpriseFrameWork框架的分层与系统业务的结合
上章详细讲了EnterpriseFrameWork框架中的每个分层,这都是从技术层面来说明,也就是我们知道怎么来建一个控制器或一个业务对象,但开发过程中应该建一个什么样的控制器或业务对象了?本章的主要 ...
- hbase安装
HBase的安装 本篇介绍两种HBase的安装方式:本地安装方式和伪分布式安装方式. 安装的前提条件是已经成功安装了hadoop,而且hadoop的版本要和hbase的版本相匹配. 我将要安装的hba ...
- DDD:谈谈数据模型、领域模型、视图模型和命令模型
背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...
- Fast Image Cache – iOS 应用程序高性能图片缓存
Fast Image Cache 是一种在 iOS 应用程序中高效.持续.超快速的存储和检索图像的解决方案.任何良好的 iOS 应用程序的用户体验都应该是快速,平滑滚动的,Fast Image Cac ...
- [python]爬代理ip v2.0(未完待续)
爬代理ip 所有的代码都放到了我的github上面, HTTP代理常识 HTTP代理按匿名度可分为透明代理.匿名代理和高度匿名代理. 特别感谢:勤奋的小孩 在评论中指出我文章中的错误. REMOTE_ ...
- 转贴:JavaScript实现Ajax请求简单示例
转至:https://my.oschina.net/u/658145/blog/167651 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...
- 已超过传入消息(65536)的最大消息大小配额。若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性。
错误:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性. 或者 错误:反序列化操作“GetAllUserData ...
- Winform开发框架之权限管理系统改进的经验总结(2)-用户选择界面的设计
在上篇总结随笔<Winform开发框架之权限管理系统改进的经验总结(1)-TreeListLookupEdit控件的使用>介绍了权限管理模块的用户管理部分,其中主要介绍了其中的用户所属公司 ...
- 【Jquery回顾】解决$冲突的问题->自定义JQuery快捷键
$(function() { $whatever = jQuery.noConflict(); alert($whatever("#cr").text()); })
- java俄罗斯方块游戏代码
java俄罗斯方块游戏代码: package com; import java.awt.Color; import java.awt.Graphics; import java.awt.event.K ...