图像篇:

  代码:

 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图像以及剪切的更多相关文章

  1. Canvas中的剪切clip()方法

    Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...

  2. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

  3. canvas图像保存

    很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...

  4. 如何实现Canvas图像的拖拽、点击等操作

    上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...

  5. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  6. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  7. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  8. HTML5 Canvas图像放大、移动实例1

    1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...

  9. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

随机推荐

  1. springmvc-restful

    1.restful概述 REST 仅仅是一种架构的风格,并不是真正的架构,也不是一个软件,而是一种思想. 我们可以基于现有的HTTP.URI.XML.等现有技术来实现REST的风格.而不用去学习任何新 ...

  2. jstl标签 c:if和c:choose

    <c:if test="${test == null}">test为null</c:if> 其意思是,如果test 为 null,那么就打印 “test为n ...

  3. Shell中数学计算/运算

    shell中的赋值和操作默认都是字符串处理. 1)使用let(只能进行整数运算)var=1let "var+=1"echo $var输出结果为2 注意:a)let几乎支持所有的运算 ...

  4. C#遍历指定文件夹中的所有文件

    DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryInfo NextFolder in ...

  5. 移动端的坑 之 在可编辑的div中实现placeholder

    1.当我们个  div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的 <d ...

  6. jsp连接sqlServer数据库教程、jsp连接sqlServer数据库报ClassNotFoundException异常

    jsp连接sqlServer数据库教程: 首先讲下我用的工具版本以供参考: jar包:jtds1.3.1.jar  下载地址:点击进入 数据库:SQL Server2012 服务器:Tomcat8.0 ...

  7. STL视频_02

    [01:05]主要讲一下几个要点: 1.模板.函数模板 类模板 以及它们的用法 2.容器.什么是容器 和 容器的分类,各种容器的数据结构 3.容器vector的具体用法,包括迭代器的具体用法 [01: ...

  8. 《Think in Java》(六)访问权限控制

    类访问权限:public,default(包访问权限的类,在包外可以调用该类的static成员) 类属性访问权限:public,protected,default,private

  9. cocos2d-js 创建帧动画

    封装创建方法 var RunActionHelper = function(){ };RunActionHelper.prototype.createAnimationByPlist = functi ...

  10. python向数据库插入中文乱码问题

    1.python向数据库插入中文乱码问题 直接手动insert into 中文 不乱码,但是用程序跑起来就乱码. conn =MySQLdb.connect(host="127.0.0.1& ...