html5 canvas裁剪区域

<!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整理一下!

现在开始继续整理!!!

时间: 2024-11-10 01:28:57

html5 canvas裁剪区域的相关文章

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

今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真正的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下: 1.html部分:<div> <input type="file" id="imgFile"&

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

之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的形式展现,各个数据之间形成的区域用不同的颜色表示,具体可以看下面的DEMO演示. 你也可以在这里查看在线演示 下面我们来简单介绍一下实现这款HTML5图表的过程以及源代码. HTML代码: <canvas id="cvs" width="600" height=&

html5 canvas 详细使用教程

导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.

html5 canvas的教程

原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画

HTML5 本地裁剪图片

最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一:获取文件,读取文件并生成url 二:根据容器的大小使用canvas绘制图片 三:使用canva

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

接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理.在游戏中的资源大多数都是加载图片. 一.canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh

html5 canvas教程

前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺.裁剪.像素处理[不只图像.包括其他绘制图形]) 绘制文字 保存和恢复状态(context) 保存文件 结合setInterval制作动画 结语.demo下载   html5 canvas教程

html5&lt;canvas&gt;画图

前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就 有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实验. 温馨提示:以下所有实验请使用最新版的opera 基本知识     context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是        

html5 &lt;canvas&gt;画图

<canvas></canvas>是html5出现的新标签 context是一个封装了很多绘图功能的对象,获取这个对象的方法是  var context=canvas.getContext("2d"); canvas元素绘制图像的时候有2种方法,分别是   context.fill() //填充       context.stroke() //绘制边框 style:在进行图形绘制前,要设置好绘图的样式 context.fillStyle  //填充的样式