canvas图像以及剪切
图像篇:
代码:
1 /**
2 * Created by Administrator on 2016/1/28.
3 */
4 function draw (id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext("2d");
7 var newImg = new Image();
8 newImg.src = "女孩.jpg";
9 newImg.onload = function (){
10 // onload 保证了图片的加载完成
11 // context.drawImage(newImg,0,0);
12 // context.drawImage(newImg,0,0,150,200);
13 // context.drawImage(newImg,0,0,100,100,0,0,120,120);
14 }
15 }
主要用到的方法,drawImage()。
格式有三种:
1)drawImage(image,x,y): image:所要添加的图像对象,图像坐标。
2)drawImage(image,x,y,width,height):添了个能改变图像大小的参数,后面两个数值用于确定图像的的大小,可用于缩放。
3)drawImage(image,sx,sy,swidth,sheight,x,y,Width,Height):
为方便记忆自己总结如下:
前四个数值用于确定剪切时图像的坐标及剪切后图像的宽度高度。被剪切图像 即 剪切后的图像。
后四个数值用于确定剪切后的图像的摆放位置坐标及剪切后图像设置的新的宽度和高度。
最后值得注意的是,drawImage()方法不仅可以放图像还可以放置画布和视频。
这里还应该注意onload的应用,它保证了图片加载完成即成功显示了图片。
* 放置画布时妙点领悟,可以把一个图片当成画布(背景),再在其上面绘制新的东西。*
剪切篇:
代码:
/**
* Created by Administrator on 2016/1/28.
*/
function draw (id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
var newImage = new Image();
newImage.src = "动漫人物多.jpg";
newImage.onload = function(){
// context.save();
ArcClip(context);
context.drawImage(newImage,0,0);
// context.restore();
context.globalAlpha = 0.6;
FillRect(context);
}
}
function FillRect(context){
context.beginPath();
context.rect(150,150,90,90);
context.fillStyle = "#f90";
context.fill();
}
function ArcClip(context){
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.clip();
}
分两种情况:
1)带有代码中的注释行时:会生成
2)不带代码中的注释行时:会生成
解释:有必要解释以下这里的剪切的含义,这里的剪切意思是,剪谁显示谁,类似与flash中的遮罩。
剪切主要用到的方法是 clip()。该方法没有参数,只是简单的裁剪路径。
globalAlpha()方法:相当与rgba中的a,是用于设置透明度的。
save()和restore()方法:这里首先调用save()方法保存了当前上下文的状态,用restore恢复了上下文的状态,
即剪切之前的状态。所有在接下来的绘制当中不再手剪切区域限制。
canvas图像以及剪切的更多相关文章
- Canvas中的剪切clip()方法
Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...
- 【HTML5】Canvas图像
把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象. 显示一个canvas图像: <!DOCTYPE html> &l ...
- canvas图像保存
很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...
- 如何实现Canvas图像的拖拽、点击等操作
上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...
- PHP《将画布(canvas)图像保存成本地图片的方法》
用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...
- Canvas 实现图片剪切
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- HTML5 Canvas图像放大、移动实例1
1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...
- HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...
随机推荐
- MongoDB快速入门(八)- 删除文档
删除文档 MongoDB 的 remove()方法用于从集合中删除文档.remove()方法接受两个参数.一个是标准缺失,第二是justOne标志 deletion criteria : 根据文件(可 ...
- RHCE学习笔记 管理1 (第一、二章)
第一章 命令行访问 1.Ctrl+alt+F2~F6 切到虚拟控制台,ctrl+alt+F1 回到图形界面 2.格式 : 命令 选项 参数 [] 为可选项目 ...表示该项目任意 ...
- How does asp.net web api work?
https://hub.packtpub.com/working-aspnet-web-api/ https://docs.microsoft.com/en-us/aspnet/web-api/ove ...
- python机器学习——分词
使用jieba库进行分词 安装jieba就不说了,自行百度! import jieba 将标题分词,并转为list seg_list = list(jieba.cut(result.get(" ...
- EF与手写Model的区别以及联系
1.在数据库表名上,EF是随意的,但是如果是Model的话,就应该在建立数据库的时候考虑到讲数据库表名变为复数,如Movie.cs 数据库应该为Movies
- MapReduce-读取HBase
MapReduce读取HBase数据 代码如下 package com.hbase.mapreduce; import java.io.IOException; import org.apache.h ...
- HDU3047 Zjnu Stadium
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- ansible实现发布、回滚功能
ansible的两篇博客,本来是打算合二为一的,发现只用一篇写,嗯,好鬼长.... 一向秉承简单为美的我于是忍痛割爱,一分为二了 ansible实现升级发布.回滚功能 1.应用场景 在实际生产环境中, ...
- servlet cannot be resolved to a type解决办法
工程里的路径权限高,eclipse并到classpath里寻找jar位置. 项目名-->右键 Property-->选择 Build Path-->选择 Configure Buil ...
- python中的SMTP发送邮件
一. 介绍 python3中自带了smtplib模块和email模块 smtplib模块:负责与邮件服务器的交互 email模块:负责组织邮件内容 二. smtplib模块 smtplib模块:主要是 ...