<!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. 吉他软件Guitar Pro播放无声音的解决方法

    系统环境:适用于Windows操作系统和macOS的Guitar Pro . 问题表现:已成功安装Guitar Pro ,但用Guitar Pro 播放时没有任何声音或播放失真. 解决方案:首先确保安 ...

  2. Word或者WPS里证件照的背景底色和像素调整

    证件照的背景底色调整和像素调整         关于证件照的背景底色自行调整,比较方便的方法是用Word或者WPS来进行调整,当然也可以利用两者相结合的方法来进行调整,下面来系统的说一下这两种方式.此 ...

  3. linux一切皆文件之tty字符设备(深入理解sshd创建pty的过程) （五）

    一.知识准备 1.在linux中,一切皆为文件,所有不同种类的类型都被抽象成文件(比如:块设备,socket套接字,pipe队列) 2.操作这些不同的类型就像操作文件一样,比如增删改查等 3.块设备支 ...

  4. 软件工程 BUAAMOOC项目Postmortem结果

    设想和目标 1.我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件是基于北航MOOC网站做的Android手机客户端,用于便捷的在学校里通过手机做到随时随地 ...

  5. “Linux内核分析”实验二报告

    张文俊 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.第二周学习内 ...

  6. Linux shell（1）

    Linux的Shell种类众多,常见的有:Bourne Shell(/usr/bin/sh或/bin/sh).Bourne Again Shell(/bin/bash).C Shell(/usr/bi ...

  7. 基于python的机器学习实现日元币对人民币汇率预测

    ## 导入所需的包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import tensorflow a ...

  8. Beta版本冲刺(六)

    目录 组员情况 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最新成果 团队签入记 ...

  9. Python爬虫实战：2017中国最好大学排名

    抓取内容: 从最好大学网上抓取中国前10的大学排名.大学名称.总分,并数据格式左对齐. http://www.zuihaodaxue.cn/zuihaodaxuepaiming2017.html 首先 ...

  10. Thinkphp3.2 入口绑定问题记录

    // 应用入口文件 // 检测PHP环境if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); ...