<!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. （功能篇）回顾Bug管理系统Mantis优化改造经历

    共分为两篇,功能篇和技术篇. 时间大约是2016年冬天. 考虑搭一个用于Bug管理和追踪的系统. 综合比较下,选择了小巧的开源工具,Mantis. 在源码基础上,做代码修改,完成了定制版的优化改造. ...

  2. 【zigbee 】2.4G信号发放器 AT2401C PA功放

    概述 AT2401C 是一款面向Zigbee,无线传感网络以及其他2.4GHz 频 段无线系统的全集成射频功能的射频前端单芯片.AT2401C 是采用 CMOS 工艺实现的单芯片器件,其内部集成了功率 ...

  3. mysql学习（1）

    开始我们基础的mysql学习 第一部分:补充知识 1. 昨天讲到的mysql初始化密码为空,今天又get到一种新的方法 Mysql安装后需要做的 Mysql安装成功后,默认的root用户密码为空,你可 ...

  4. No.1101_第十次团队会议

    今天项目进展很多,大家都在现在的成果而开心,信心高涨,后面的任务的完成也基本都能指日可待.之前团队出现了各种问题,沟通出现了很多障碍,导致各方面受阻.现在大家再面对面坦诚相对,交流了一下自己的想法,结 ...

  5. 【Beta阶段】第五次Scrum Meeting！

    每日任务内容: 本次会议为第五次Scrum Meeting会议~ 由于本次会议项目经理召开时间依旧较晚,在公寓7层召开,女生参与了线上会议. 队员 昨日完成任务 明日要完成任务 刘乾 #167(未完成 ...

  6. 蜗牛慢慢爬 LeetCode 22. Generate Parentheses [Difficulty: Medium]

    题目 Given n pairs of parentheses, write a function to generate all combinations of well-formed parent ...

  7. jmeter 获取执行脚本的路径

    需求:向jmeter.jmx 的路径下 写日志 : import org.apache.jmeter.services.FileServer; import com.bzj.utils.*; Stri ...

  8. Linux命令（十七） 关机命令

    在 Linux 系统下一些常用的关机/重启命令有 shutdown.halt.reboot以及init,他们都可以达到重启系统的目的,但每个命令的内部工作过程不同. 一.使用 shutdown 关机或 ...

  9. window.open() & iframe

    window.open() & iframe https://www.w3schools.com/jsref/met_win_open.asp window.open(URL, name, s ...

  10. 【Revit API】创建相机视角

    在Revit中有一个相机功能可以以相机视角产生一个视图.一开始我在Revit2016的API文档中找关键词Camera,但是没什么收获. 其实这个相机功能的真正核心是创建透视视图:View3D.Cre ...