图像篇:

  代码:

 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. Java 重写equals()与hashCode()方法

    List对象的contains方法实际上也是调用的equals()方法来进行逐条对比的. 示例代码: package com.imooc.collection; /** * 课程类 */ public ...

  2. 【转载】树链剖分.By.Xminh

    轻重链剖分 其实就是俗称的树链剖分. PS:树链剖分不止有轻重链剖分.但是大多数时候的树链剖分指的就是轻重链剖分. dfs序 给树的节点重新编号,使得任意一个节点满足子树的dfs序都比它要大,而且它子 ...

  3. linux基础(8)-文件处理(awk 、sed、grep)

    grep基本用法 格式:grep [选项] [模式] [文件]   选项: -c:只显示有多少行匹配 ,而不具体显示匹配的行 -n:在每一行前面打印该行在文件中的行数 -i:在字符串比较的时候忽略大小 ...

  4. Spring Boot入门——thymeleaf模板使用

    使用步骤 1.在pom.xml中引入thymeleaf <!-- thymeleaf插件 --> <dependency> <groupId>org.springf ...

  5. zhly

    5. 百叶002 名字2008 1.新浪   阿里矢量图库账号 15031116087 名字2008 2.acdsee 账号  1173209945  同密码一样 3.zhly   我的名字2016 ...

  6. js dom操作选择器,dom操作复习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 如何理解python中的if __name__=='main'的作用

    一. 一个浅显易懂的比喻 我们在学习python编程时,不可避免的会遇到if __name__=='main'这样的语句,它到底有什么作用呢? <如何简单地理解Python中的if __name ...

  8. hdu4217splay

    题意:有1到n的数组,每次删除第k小的值,并求和 题解:splay基本操作,删除+合并 坑点:由于不会c++指针操作,sb的只删除了头指针导致一直mle #include<bits/stdc++ ...

  9. android自定义日期组件之双DatePicker

    1.效果图(两个DatePicker放在一起,同时选择起始与结束时间): 2.实现 2.1布局文件: <?xml version="1.0" encoding="u ...

  10. linux查看网卡速度

    ethtool eth0 会包含速度模式等各项属性信息   lspci|grep -i ether 可以查看硬件设备具体型号,会包含硬件厂商及信息   dmesg |grep -i eth 会显示系统 ...