澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

canvas中图纸的组合方式,幼功知识整理

globalCompositeOperation即Canvas中的合成操作。

canvas 基础知识整理(二),canvas基础知识整理

html部分:

<canvas id="myCanvas" width="800" height="800" ></canvas>

第一部分、保存和恢复绘图状态
画布中,绘图状态指的是描述某一时刻2D渲染上下文外观的整套属性,从简单的颜色值到复杂变换矩阵及其它特性
注意:画布上的当前路径和当前位图(正在显示的内容)不属于状态
1.保存绘图状态:save();
2.恢复绘图状态:restore();

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        var text = "hello world!";
        context.font="30px serif"   // 把文本大小设置为30px

        context.fillStyle = "red";   // 设置文本颜色为红色
        context.fillText(text,40,40);   // 红色文本
        context.save();   // 保存画布状态( 把文字的红色状态保存 )

        context.fillStyle = "yellow";   // 设置文本颜色为黄色
       context.fillText(text,40,80);   // 黄色文本
        context.save();   // 保存画布状态( 把文字的黄色状态保存 )

        context.restore();   // 恢复画布状态
        context.fillText(text,40,120);   // 黄色文本

        context.restore();
        context.fillText(text,40,160);   // 红色文本
    }draw1('myCanvas'); 
</script>

 

澳门新浦京娱乐场网站 1

总结:
当调用save方法保存绘图状态时,2D渲染上下文会保存一个绘图状态栈,最近保存的状态在最顶部,调用restore方法第一个恢复的绘图状态是从栈的最顶部取出的;当栈返回最后一个状态后,会将它清除,使栈变成空的。

上例中最后一个被存入栈的是黄色,所以第一次调用restore方法时显示的文字是黄色,而不是红色;第二次调用restore方法时,才会显示红色文字。

第二部分 变形
注意:每一种变形方法,包括平移,都会影响方法执行后所绘制的所有元素,因为他们都是直接在2D渲染上下文操作的,而不是针对所绘制的图形。

  1. 平移 translate(x,y)
    x,y是坐标值
    移动的是2D渲染上下文的原点,而不是所绘制的对象,如下图:

澳门新浦京娱乐场网站 2

实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.fillRect(10,10,50,50);
        context.translate(60,60);    // 原点坐标从(10,10)移动到(60,60)的位置

        context.fillStyle = "red";
        context.fillRect(10,10,50,50);    // 移动后,原点坐标由原来的(10,10)变成了(70,70)
    }draw1('myCanvas'); 
</script>

澳门新浦京娱乐场网站 3

  1. 缩放 scale(x,y)
    x,y是缩放的倍数,不是像素值。
    澳门新浦京娱乐场网站,缩放是调整2D上下文的尺寸。

 

澳门新浦京娱乐场网站 4

上例中,将2D渲染上下文的x方向和y方向都乘以2,所以2D渲染上下文及其所绘制的所有对象都变成了2倍的尺寸
 3.旋转 rotate()
需要传入以弧度为单位的2D渲染上下文旋转角度值。 

实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.rotate(0.7854);     // 把2D渲染上下文旋转45° (Math.PI/4)

        context.fillStyle = "red";
        context.fillRect(90,90,50,50);     // 旋转画布后 图形出现在了奇怪的区域上
    }draw1('myCanvas'); 
</script>

  澳门新浦京娱乐场网站 5

rotate()把2D渲染上下文绕其原点(0,0)进行旋转,图形本身不会旋转,如下图:

澳门新浦京娱乐场网站 6

如果只是想旋转所要绘制的图形,还需要配合着tranlate将2D渲染上下文的原点平移到正在绘制的图形中心,然后再对画布执行一次旋转,接着在当前位置绘制图形,
例如:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.translate(400,400);   // 平移到正中心
        context.rotate(0.7854);   // 把2D渲染上下文旋转45° (Math.PI/4)
        context.fillStyle = "red";
        context.fillRect(90,90,50,50);   // 旋转画布后绘制一个图形
    }draw1('myCanvas'); 
</script>

澳门新浦京娱乐场网站 7

第三部分 合成
将多个可视化元素合成一个可视化元素

  1. 全局阿尔法值 globalAlpha
    值:0.0(全透明)~1.0(不透明)之间
    默认:1.0
    影响将要绘制的对象的透明度

澳门新浦京娱乐场网站 8

  1. 合成操作 globalCompositionPeration
    源 :绘制的新图形
    目标:已经绘制了图形的2D渲染上下文
    1) source-over (默认属性)源在目标之上
    2) destination-over 源在目标之下
    3) source-atop 源在目标之上,但是重叠区域两者都不透明,绘制在其他位置的目标不透明,源透明(不可见)
    4) destination-atop 源在目标之下,但是重叠区域两者都不透明,绘制在其他位置的源不透明,目标透明(不可见)
    5) source-in 源与目标重叠的部分只绘制源,不重叠的部分都变成透明
    6) destination-in 源与目标重叠的部分只绘目标,不重叠的部分都变成透明
    7) source-out 与目标不重叠的区域绘制源,其他部分变成透明
    8) destination-out 与目标不重叠的区域绘制目标,其他部分变成透明
    9) lighter 与顺序无关,如果源与目标重叠,就将两者颜色值相加,得到颜色值的最大值为255,结果就是白色
    10)copy 与顺序无关,只绘制源,覆盖掉目标
    11)xor 与顺序无关,只绘制不重叠区域,重叠区域透明

 

澳门新浦京娱乐场网站 9

第四部分 阴影
shadowBlur 模糊值
shadowOffsetX x轴方向阴影偏移
shadowOffsetY y轴方向阴影偏移
shadowColor 模糊颜色

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.shadowBlur=20;   // 20px 模糊值
        context.shadowColor="red";   // 模糊颜色
        context.shadowOffsetX = 10; 
        context.shadowOffsetY = 10; 
        context.fillRect(20,20,150,150);
    }draw1('myCanvas'); 
</script>

澳门新浦京娱乐场网站 10  

第五部分 渐变

  1. 线性渐变 createLinearGradient(x0,y0,x1,y1)
    参数 :渐变起点x,y坐标
    渐变终点x,y坐标
  2. 放射渐变 createRadialGradient(x0,y0,r0,x1,y1,r1)
    参数:前三个描述开始圆
    后三个描述结束圆
    每一个圆的(x,y)表示圆心坐标,r表示半径
    实现渐变效果是连接两个圆周的椎体,开始圆之前的部分显示偏移量为0的颜色,结束圆之后的部分显示偏移量为1的颜色值
    注:为了实现最佳效果,开始圆和结束圆放在同一个位置
    返回:CanvasGradient对象
    加颜色:addColorStop()
    参数:颜色偏移值(0:渐变起点;1:渐变终点)
    偏移量颜色值
    fillStyle和storeStyle都可以接受CanvasGradient对象表示的渐变颜色值
    实例一:线性渐变

 

澳门新浦京娱乐场网站 11

实例二:放射渐变

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        var gradient = context.createRadialGradient(500,500,100,500,500,500);     // 为了实现最佳效果,开始圆和结束圆放在同一个位置
        gradient.addColorStop(0,'blue');
        gradient.addColorStop(1,'yellow');
        context.fillStyle = gradient;
        context.fillRect(0,0,800,800);
    }draw1('myCanvas'); 
</script>

canvas中图纸的组合方式,幼功知识整理。  澳门新浦京娱乐场网站 12

第六部分 复杂路径
如何将多个路径链接在一起?
不断的调用lineTo();
moveTo 会创建一条全新的子路径
lineTo 只是沿着一条已经有的子路径继续画线

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,50);
        context.lineTo(30,150);
        context.lineTo(160,150);
        context.closePath();
        context.stroke();
        context.fill();
    }draw1('myCanvas'); 
</script>

  澳门新浦京娱乐场网站 13

2、贝塞尔曲线
quadraticCurveTo()
参数:
控制点的(x,y)坐标
路径目标点的(x,y)坐标
二次贝塞尔曲线,只有一个控制点(线条中只有一次弯曲)
bezierCurveTo()
参数:
第一个控制点(x,y)的坐标
第二个控制点(x,y)的坐标
路径目标点(x,y)的坐标
三次贝塞尔曲线,两个控制点(两次弯曲)
 实例:二次

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        context.lineWidth=5;
        context.beginPath();
        context.moveTo(50,250);
        context.quadraticCurveTo(250,100,450,250);
        context.stroke();
    }draw1('myCanvas'); 
</script> 

  澳门新浦京娱乐场网站 14

实例:三次

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id); 
        var context =canvas.getContext("2d");
        context.lineWidth=5;
        context.beginPath();
        context.moveTo(50,250);
        context.bezierCurveTo(150,50,350,450,450,250);
        context.stroke();
    }draw1('myCanvas'); 
</script>

  澳门新浦京娱乐场网站 15

以上是学习时候做的笔记,如果哪里有问题,欢迎指正,不甚感激!

参考资料  < HTML5  CANVAS基础教程 >      

 

基础知识整理(二),canvas基础知识整理 html部分: canvas id="myCanvas" width="800" height="800" /canvas 第一部分、保存和恢复绘图状态 画布中...

前文

我们在用canvas绘图中,经常会碰到当俩个图形重叠时怎么办的问题,这篇文章介绍的就是一些关于俩个图形重叠时的样式的处理问题

HTML Canvas

坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴。

检测浏览器是否支持Canvas(IE系列从IE9开始支持):

澳门新浦京娱乐场网站 16
检测浏览器是否支持Canvas

Canvas的各种属性表:

属性名称 描述  
fillStyle 填充属性 可以为一个字符串颜色值,也可以为gradient对象,或者pattern对象
strokeStyle 绘制属性 可以为一个字符串颜色值,也可以为gradient对象,或者pattern对象
font 字体样式定义  
globalAlpha 图形透明设置  
globalCompositeOperation 前后绘制的图形组合显示效果  
lineCap 线帽  
lineJoin 两条线段连接处的样式  
lineWidth 线宽 为一个数字
miterLimit 定义斜连接线和线条宽度的最大比率,这个属性只有当lineJoin="miter"时才有用  
shadowBlur 阴影模糊  
shadowColor 阴影色彩  
shadowOffsetX 阴影横向偏移  
shadowOffsetY 阴影纵向偏移  
textAlign 文本水平对齐  "start","end","left","right","center"
textBaseline 文本垂直对齐  "aplhabetic","top","hanging","middle","ideographic","bottom"

对于有global的属性都是全局属性,在使用的时候注意要先save()再restore()配置。

 

1、source-over

1. 设置组合方式

我们可以通过globalCompositeOperation这个属性,我们可以来更改俩个图形重叠时的样式

如:是想让新图覆盖原始图,还是只保留重叠部分等等.

语法:

ctx.globalCompositeOperation = source-in

先来看看几个属性值:
source-over 默认属性,新图像会覆盖在原有图像
source-in 只保留当前图重叠的部分
source-out 绘制不重叠部分
source-atop 新图像仅仅显示与老图像重叠区域,老图像仍然可以显示
destination-over 原图覆盖新图
destination-in 绘制原图和新图重叠部分
destination-out 绘制原图和新图不重叠部分
destination-atop 绘制原图和新图重叠部分以及新图
lighten 绘制新图和原图,重叠部分加色处理
darken 保留重叠部分最黑的像素
lighter 保证重叠部分最量的像素
copy 绘制新图,覆盖原图
xor 重叠部分会变成透明

Canvas中的保存和回复

通过save()方法保存渲染上下文,通过restore()方法恢复上次保存的渲染上下文。

 

这是默认值,他表示绘制的图形将画在现有画布之上

1.2 几种组合方式案例

例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #canvas1{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.arc(250,150, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

</script>
</html>

上面的例子中,我没有对图片的重叠部分做任何的处理,效果就是和source-over一样,新图会覆盖原图:

澳门新浦京娱乐场网站 17

default.png

在代码中加入globalCompositeOperation属性的时候,会呈现不同的效果

1.source-over(default)
新图像会覆盖在原有图像。(默认)

澳门新浦京娱乐场网站 18

default.png

2.source-in
只保留当前图重叠的部分其他区域都变成透明的。(包括其他的老图像区域也会透明)
ctx.globalCompositeOperation = "source-in"

澳门新浦京娱乐场网站 19

source-in.png

3.source-out
绘制不重叠部分
ctx.globalCompositeOperation = "source-out"

澳门新浦京娱乐场网站 20

source-out.png

4.source-atop
新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。

澳门新浦京娱乐场网站 21

source-atop.png

5.destination-over
原图覆盖新图
ctx.globalCompositeOperation = "destination-over"

澳门新浦京娱乐场网站 22

destination-over.png

6.destination-in
绘制原图和新图重叠部分
ctx.globalCompositeOperation = "destination-in"

澳门新浦京娱乐场网站 23

destination-in.png

7.destination-out
绘制原图和新图不重叠部分
ctx.globalCompositeOperation = "destination-out"

澳门新浦京娱乐场网站 24

destination-out.png

8.destination-atop
绘制原图和新图重叠部分以及新图
ctx.globalCompositeOperation = "destination-atop"

澳门新浦京娱乐场网站 25

destination-atop.png

9.lighten
绘制新图和原图,重叠部分加色处理
ctx.globalCompositeOperation = "lighter"

澳门新浦京娱乐场网站 26

lighter.png

10.darken
保留重叠部分最黑的像素。(每个颜色位进行比较,得到最小的)
blue: #0000ff
red: #ff0000
所以重叠部分的颜色:#000000
ctx.globalCompositeOperation = "darken"

澳门新浦京娱乐场网站 27

darken.png

11.lighter
保证重叠部分最量的像素。(每个颜色位进行比较,得到最大的)
blue: #0000ff
red: #ff0000
所以重叠部分的颜色:#ff00ff
ctx.globalCompositeOperation = "lighter"

澳门新浦京娱乐场网站 28

lighter.png

12.copy
只有新图像会被保留,其余的全部被清除(变透明)
ctx.globalCompositeOperation = "copy"

澳门新浦京娱乐场网站 29

copy.png

13.xor
重叠部分会变成透明
ctx.globalCompositeOperation = "xor"

澳门新浦京娱乐场网站 30

xor.png

Canvas中的线

一个路径绘制通常会在beginPath()和closePath()之间完成;通过stroke()来执行实际的绘制。
弧度:一个圆一周的弧度为2π,一周的角度为360。
绘制弧线的arc()方法需要指定(圆心位置x,圆心位置y,半径,起始弧度,结束弧度,绘图方向),以圆心画弧;
绘制弧线的arcTo()方法需要指定(两条线的交点X,两条线的交点Y,其中一条线的经过点X,其中一条线的经过点Y,弧线半径),以相交线画弧。

澳门新浦京娱乐场网站 31

      Canvas中的lineTo()、arc()、arcTo()的使用

二次方曲线quadraticCurveTo(控制点X坐标,控制点Y坐标,结束点X坐标,结束点Y坐标) 通过一个控制点来绘制曲线:

澳门新浦京娱乐场网站 32

  quadraticCurveTo

贝塞尔曲线bezierCurveTo()方法比quadraticCurveTo()方法多一个控制点:

澳门新浦京娱乐场网站 33

  bezierCurveTo

Canvas没有专门绘制圆的API,可以通过arc()来绘制,再通过filleStyle属性来设置填充,并通过fill()来关闭路径并填充。

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="source-over"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

Canvas中的矩形

fillRect()指定左上角和右下角指定下矩形,fileRect()调用的时候会星清晰化路径;
strokeRect()可以绘制一个矩形的边框,该方法也会清晰化路径。

澳门新浦京娱乐场网站 34

       绘制矩形以及Canvas中的线宽绘图对齐位置

 

澳门新浦京娱乐场网站 35

Canvas中的图片

在Canvas中可以使用drawImage()方法或者createPattern()方法来绘制图片。

drawImage有3种参数格式:drawImage(img,x,y); drawImage(img,x,y,w,h); drawImage(img,s1x,s1y,s2w,y2h,d1x,d1y,d2w,d2h);
createPattern(img,css-position)方法主要用于背景图片的处理,第二个参数很像CSS中的background-position属性。

澳门新浦京娱乐场网站 36

       使用drawImage绘图

澳门新浦京娱乐场网站 37

        使用createPattern绘图

 

2、destination-over

Canvas中的文字

Canvas中文字有两种显示方式,一种用fillText()方法,另一种用strokeText()方法,同绘制矩形的API很像。
绘制前可以设置fonttextAligntextBaseline属性来控制绘制文字。

澳门新浦京娱乐场网站 38

             Canvas中的文字绘制以及textAlign属性和textBaseLine属性




   线性渐变createLinearGradient     



         圆周渐变createRadialGradient

copy

只绘制新图形,删除其他所有内容

darker

图形重叠的地方的颜色由两个颜色值相减后的值决定

destination-atop

已有的内容只有在它和新图形重叠的地方保留。新图形绘制在内容之后。

destination-in

新图形以及已有画布重叠的地方,已有内容都保留,所有其他内容成为透明。

destination-out

新图像以及已有画布不重叠的地方,已有内容都保留,所有其他内容成为透明。

destination-over

新图形绘制于已有内容的后面。

lighter

图形重叠的地方的颜色由两个颜色值相加后的值决定

source-atop

重叠的地方绘制新图形。

source-in

新图形以及已有画布重叠的地方,绘制新图形,所有其他内容成为透明。

source-out

新图像以及已有画布不重叠的地方,绘制新图形,所有其他内容成为透明。

source-over

新图形绘制于已有图形的顶部,为默认行为。

xor

在重叠和正常绘制的其他地方,图形都成为透明。

这个操作的值与前一个值相反,所以现在目标绘制在源之上

Canvas中的裁剪

使用clip()方法裁剪的区域之外的动画不受影响,该方法通过计算所有的子路径来建立新的剪切区域,
未闭合的子路径在填充区按照闭合方式填充,但并不影响实际的子路径集合,新的剪切区域将替换当前的剪切区域。
裁剪路径其实就是绘图路径,只不过这个路径不是拿来绘图的,而是设定显示区域和遮挡区域的一个分界线。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-over"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

Canvas中的像素操作

可以通过createImageData(w,h)方法来创建一个全透明黑色的空白像素矩阵。

可以通过putImageData(canvasData,imgX,imgY,toX,toY,toW,toH)方法来将图像渲染到画布上。
当前通过putImageData()到画布上的图像不会受scale()等方法的影响。

可以通过getImageData(x,y,w,h)方法来获取Canvas中某一矩形区域的像素数据,像素数据按照RGBA方式排序。

澳门新浦京娱乐场网站 39

    通过像素操作来模糊图片

 

 

Canvas 坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴。 检测浏览器是否支持Canvas(IE系列从IE9开始支持): 检测...

澳门新浦京娱乐场网站 40

3、source-atop

这个操作会将源绘制在目标之上,但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的,但源是透明的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="source-atop"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 41

4、destination-atop

这个操作与source-atop相反,目标绘制在源之上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-atop"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 42

5、source-in

在源于目标重叠的区域只绘制源,而不重叠的部分编程透明的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="source-in"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 43

6、destination-in

这个操作与source-in相反,在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-in"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 44

7、source-out

在与目标不重叠的区域上绘制源,其他部分都变成透明的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="source-out"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 45

8、destination-out

在与源不重叠的区域上保留目标。其他部分都变成透明的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-out"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 46

9、lighter

这个值与顺序无关,如果源与目标重叠,就将两者的颜色值相加。得到的颜色值的最大取值为255。如下例中,红色的rgb值为rgb(255,0,0),绿色的rgb值为rgb(0,128,0),两者相加为rgb(255,128,0),即为图中橘色。如果一个rgb值为rgb(63,169,245),另一个rgb值为rgb(255,123,172),两者相加取最大值255,即rgb(255,255,255)为白色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="lighter"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 47

10、copy

这个值与顺序无关,只绘制源,覆盖掉目标。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="copy"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 48

11、xor

这个值与顺序无关,只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://www.bonzeragro.com/uploads/allimg/191212/09431C520-33.jpg"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="red";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="xor"
            context.fillStyle="green";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

澳门新浦京娱乐场网站 49

注:图中“看不见的区域”为透明的源。

参考网站:

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:canvas中图纸的组合方式,幼功知识整理