<!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. [PLC]ST语言四：INV_MEP_MEF_PLS_PLF_MC_MCR

    一:INV_MEP_MEF_PLS_PLF_MC_MCR 说明:简单的顺控指令不做其他说明. 控制要求:无 编程梯形图: 结构化编程ST语言: (*运算结果的反转INV(EN);*) M415:=in ...

  2. SQL手工注入漏洞测试(Sql Server数据库)

    还是先找到注入点,然后order by找出字段数:4 通过SQL语句中and 1=2 union select 1,2,3……,n联合查询,判断显示的是哪些字段,就是原本显示标题和内容时候的查询字段. ...

  3. PAT甲题题解-1063. Set Similarity (25)-set的使用

    题意:两个整数集合,它们的相似度定义为:nc/nt*100%nc为两个集合都有的整数nt为两个集合一共有的整数注意这里的整数都是各不相同的,即重复的不考虑在内.给出n个整数集合,和k个询问,让你输出每 ...

  4. Scrum Meeting NO.2

    Scrum Meeting No.2 1.会议内容 今天,我们对已经确定的任务进行了分配,并针对界面设计方面的细节进行讨论. 由于这周其它课程任务繁重(编译+数据库).前端的任务主要分配给编程能力较好 ...

  5. [转帖]VMware Vsphere 6.0安装部署 （三） vCenter Server安装

    VMware Vsphere 6.0安装部署 (三) vCenter Server安装 2016年08月29日 14:59:14 dAng1r0Us 阅读数:72942   版权声明:本文为博主原创文 ...

  6. [转帖] Linux运维基础知识学习内容

    原作者地址:https://www.cnblogs.com/chenshoubiao/p/4793487.html 最近在学习 linux  对简单的命令有所掌握 但是 复杂的脚本 shell pyt ...

  7. adb 安装apk报INSTALL_FAILED_NO_MATCHING_ABIS

    想在模拟器中安装搜狗拼音输入法,结果安装的时候报错:INSTALL_FAILED_NO_MATCHING_ABIS 上网搜索发现解决方法如下: 原博客:使用Genymotion调试出现错误INSTAL ...

  8. OneZero第二次站立会议（2016.3.22）

    会议时间:2016年3月22日 9:33~9:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论并修改. 会议内容:以下为会议插图 1.界面原型方面,小组成员对夏所画的 ...

  9. PHPSQL注入

    什么是SQL注入? 就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 例如一个简单的登录表单(这里把密码写成明文方便说明):  当在表 ...

  10. 【bzoj3196】 Tyvj1730—二逼平衡树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3196 (题目链接) 题意 1.查询k在区间内的排名:2.查询区间内排名为k的值:3.修改某一位值上的 ...