<!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. C# List left join

    public class Test1 { public int ID { get; set; } public string Name { get; set; } } public class Tes ...

  2. pyinstaller将python编写的打卡程序打包成exe

    编写了一个简易的定时提醒下班打卡程序,python代码如下: #coding:utf-8 import time import datetime from tkMessageBox import * ...

  3. python类属性在继承中的修改的影响

    class A(object): x = 1 class B(A): pass class C(A): pass # 通过父类修改类属性,子类继承的类属性也改变 A.x = 3 print(A.x, ...

  4. （第十二周）Debug阶段成员贡献分

    项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 个人贡献分=基础分+表现分 基础分=5*5*0.5/5=2.5 成员得分如下: 成员 基础分 表现分 个人贡献 ...

  5. 《linux内核分析》第六周：分析fork函数对应的系统调用处理过程

    一. 阅读理解task_struct数据结构http://codelab.shiyanlou.com/xref/linux-3.18.6/include/linux/sched.h#1235: 进程是 ...

  6. Eat Style --proposed by Chongyang Bai

    NEED 1. 有人希望妈妈是这样的: 但实际上对妈妈做的菜反应确是这样的: 处在不同的时节,根据不同的个人偏好,到底该做些什么饭菜?工作繁忙,家里的厨师可能也没时间琢磨.最后做出的只是应付差事的饭菜 ...

  7. ITSS相关的名词解释

    1.ITSM(IT Service Management)IT服务管理.从宏观的角度可以理解为一个领域或行业,人中观的角度可以理解为一种IT管理的方法论,从微观的角度可以理解为是一套协同动作的流程.从 ...

  8. 【转】mybatis如何防止sql注入

    sql注入大家都不陌生,是一种常见的攻击方式,攻击者在界面的表单信息或url上输入一些奇怪的sql片段,例如“or ‘1’=’1’”这样的语句,有可能入侵参数校验不足的应用程序.所以在我们的应用中需要 ...

  9. google学术登陆不上的解决办法

    打开我的电脑,依次打开C盘,Windows,System32,drivers,etc 即C:\Windows\System32\drivers\etc   用记事本打开etc文件夹中的hosts. 在 ...

  10. hexo d 报错‘fatal: could not read Username for 'https://github.com': No error’

    问题描述 今天早上,一如往常的往在github上创建的hexo博客上传文章,结果报错 'fatal: could not read Username for 'https://github.com': ...