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整理一下！
现在开始继续整理！！！
html5 canvas裁剪区域的更多相关文章
- html5 canvas 自定义画图裁剪图片
html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...
- web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- 基于HTML5 Canvas的线性区域图表教程
之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...
- HTML5 本地裁剪图片
下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一:获取文件,读取文件并生成url 二:根据容器的大小 ...
- 玩转html5<canvas>画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- html5 canvas的教程
原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 原作很强悍 导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路 ...
- JavaScript+html5 canvas实现本地截图教程
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
随机推荐
- Tortoisegit生成SSH密钥一次性输入密码
一.找到Tortoisegit 的安装目录,进入bin目录下,找到puttygen.exe并打开,点击Generate按钮,会看到上面出现绿色滚动条,此时要不停移动鼠标,进度会比较快,完成后,就会看到 ...
- Jenkins下载安装
Jenkins是什么? Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...
- 金蝶盘点机PDA仓库条码管理家电类序列号扫描操作方法-采购入库单
1.1. 采购入库单 传统的进销存管理软件需要人工识别商品品种,清点商品数量,然后再去人工手工在电脑上一行行的录入采购入库单.录单效率低,误差大. 如果使用汉码盘点机PDA,入库时,仓管员只需要手持 ...
- PAT甲题题解-1014. Waiting in Line (30)-模拟，优先级队列
题意:n个窗口,每个窗口可以排m人.有k为顾客需要办理业务,给出了每个客户的办理业务时间.银行在8点开始服务,如果窗口都排满了,客户就得在黄线外等候.如果有一个窗口用户服务结束,黄线外的客户就进来一个 ...
- C++：钻石继承与虚继承
QUESTION:什么是钻石继承? ANSWER:假设我们已经有了两个类Father1和Father2,他们都是类GrandFather的子类.现在又有一个新类Son,这个新类通过多继承机制对类Fat ...
- 网络助手的NABCD分析
我们小组这次做的软件名字叫为校园网络助手.本校校园网分为内网与外网认证两种,并且有着流量限制,所以我们设计出来了这项软件,它主要有着两项功能:一键WIFI与校内网盘. N--need.在学校里每当流量 ...
- 小学生二元四则运算（F）
整体功能简介: 1.题目不重复: 2.可以定制数量: 3.可以自己选择输入范围: 4.可以选择是否添加乘除法: 5.可以选择除法结果是取整或商加余数形式表示或小数方式(默认小数点后两位)表示: 6 ...
- 学习 TTreeView [1] - TTreeNodes、TTreeNode 与 Items、Items.Count、Items.Clear
填写 TTreeView 的内容一般是这样开始的(下图), 不过我觉得最好习惯用动态建立. 打个比方: 譬如 TreeView 是一个军营的"营部"! 这里会有营长.连长.排长.班 ...
- Java 基本数据类型 sizeof 功能
Java 基本数据类型 sizeof 功能 来源 https://blog.csdn.net/ithomer/article/details/7310008 Java基本数据类型int 32b ...
- Python Django性能测试与优化指南
摘要:本文通过一个简单的实例一步一步引导读者对其进行全方位的性能优化.以下是译文. 唐纳德·克努特(Donald Knuth)曾经说过:“不成熟的优化方案是万恶之源.”然而,任何一个承受高负载的成熟项 ...