<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>canvas裁剪区域</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

	canvasApp();

}

function canvasSupport(){

	return Modernizr.canvas;

}

function canvasApp(){

	if(!canvasSupport()){

		return;

	}else{

		var theCanvas = document.getElementById('canvas')

		var context = theCanvas.getContext("2d")

	}

	drawScreen();

	function drawScreen(){

		context.fillStyle = "green";

		context.fillRect(10,10,200,200);

		context.save();

		context.beginPath();

		context.rect(0,0,50,50);

		context.clip();

		//红色圆

		context.beginPath();

		context.strokeStyle="red";

		context.lineWidth=5;

		context.arc(100,100,100,(Math.PI/180)*0,(Math.PI/180)*360,false);

		//整理

		context.stroke();

		context.closePath();

		context.restore();

		//再次裁剪整个画布

		context.beginPath();

		context.rect(0,0,200,200);

		context.clip();

		//绘制一个没有裁剪的蓝线

		context.beginPath();

		context.strokeStyle="blue";

		context.lineWidth=5;

		context.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,false);

		//整圆

		context.stroke();

		context.closePath();

	}

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有问题，请在下方发送你问题，我看到会解答！！

</canvas>

</body>

</html>

首先有个200*200的矩形是绿色的

然后裁剪50*50.。下面那个圆弧只有50*50的区域内了

然后再切换回200*200

然后那个蓝色的圆又看到了

大概的意思就是这样

最近忙着面试啥的搞得没时间把我的canvas整理一下！

现在开始继续整理！！！

html5 canvas裁剪区域的更多相关文章

  1. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  2. web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  3. 利用html5 canvas实现纯前端上传图片的裁剪

    今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...

  4. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

  5. HTML5 本地裁剪图片

    下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^   功能实现步奏:   一:获取文件,读取文件并生成url   二:根据容器的大小 ...

  6. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  7. html5 canvas的教程

    原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...

  8. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  9. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

随机推荐

  1. MODIS 数据产品预处理

    MODIS 数据产品预处理 1  MCTK重投影 第一步:安装ENVI的MCTK扩展工具 解压压缩包,将其中的mctk.sav与modis_products.scsv文件复制到如图所示,相应的ENVI ...

  2. EOS开发基础之六：使用cleos命令行客户端操作EOS——智能合约之eosio.msig和eosio.system

    上一节我们搞了老半天,也没整明白Exchange这个合约到底干啥用的.就它官方提供的说法,是用于货币的创造和交易.我没整明白,所以去看了下代码,发现代码头文件里面有下面这段话: This contra ...

  3. React Native 'config.h' file not found 问题、 'glog/logging.h' file not found 问题、configure: error: C compiler cannot create executables问题解决过程记录

    1.在github 上面 git clone 一个RN 项目代码,npm install (yarn)后,准备运行iOS工程,发现'config.h' file not found ,恶心!!! 百度 ...

  4. Linux内核设计与实现（chapter1/2）

    Linux内核简介 Unix从一个失败的多用户操作系统Multics中衍生来的. Unix强大的原因: 简洁 几乎所有的东西都被当做文件来对待,可以通过相同的系统调用接口来进行调用. 因为它是由c语言 ...

  5. js页面实时显示时间

    1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout( ...

  6. [转]JAVA 在main中访问内部类、方法等

    1.使用静态的属性.方法.内部类 class A { static int i = 1; // A 类的静态属性 static void outPut() // A 类的静态方法 { System.o ...

  7. JS基础（五）自定义函数

    作用:是为了让重复使用的语句,方便进行调用. 定义格式: function 自定义函数名 (参数1, 参数2,...) { 执行的语句 } 函数的封装:把语句放到函数中去的过程. 参数:通过参数的改变 ...

  8. HTTP协议(1)

    HTTP 协议笔记 1. HTTP 传输机制 HTTP 是一个应用层协议,位于 TCP 的层次之上,并且是基于 TCP 协议进行通信的,也就是说 HTTP 在每一次通信之前都要先建立 TCP 连接来保 ...

  9. WM_CONCAT和LISTAGG 语法例子

    select to_char(replace(wm_concat(name), ',', '')) from codeitems where setid = 'A018' and ' like cod ...

  10. iOS—— iOS 内存管理：增长+泄漏

    1.如果是循环中局部变量data没有释放导致的,给NSData 手动添加释放池 @autoreleasepool { your code } 2.url 转变字典key值的时候出现内存暴增! //设置 ...