<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 1024;

            canvas.height = 768;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                context.fillStyle = "blue";

                context.fillRect(100,200,400,400);

                context.globalCompositeOperation = "sourse-over";

                context.fillStyle = "red";

                context.beginPath();

                    context.moveTo(400,300);

                    context.lineTo(650,700);

                    context.lineTo(150,700);

                context.closePath();

                context.fill();

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

    </script>

</body>

<script>

    /*global

        globalAlpha

        globalCompositeOperation  = "source-over"(default)

                                    sourse-atop

                                    sourse-in

                                    sourse-out

                                    destination-over  //前面绘制的覆盖了后面绘制的图形

                                    destination-atop

                                    destination-in

                                    destination-out

                                    lighter

                                    copy

                                    xor

    */

</script>

</html>

canvas-7globleCompositeOperation.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. python zeros用法实例

    编程就是踩坑的过程.今天又踩了一个坑,做个积累吧. 在给数组赋初始值的时候,经常会用到0数组,而Python中,我们使用zero()函数来实现.在默认的情况下,zeros创建的数组元素类型是浮点型的, ...

  2. Java异常处理 10 个最佳实践

    异常处理是Java 开发中的一个重要部分.它是关乎每个应用的一个非功能性需求,是为了处理任何错误状况,比如资源不可访问,非法输入,空输入等等.Java提供了几个异常处理特性,以try,catch 和 ...

  3. Linux 用脚本编写搭建yum本地仓库

    Linux 用脚本编写搭建yum本地仓库 源码如下: #!/bin/bash #该脚本用于自动化搭建本地yum仓库 #挂载光盘 #作者:雨中落叶 #博客:https://www.cnblogs.com ...

  4. mongo 字段重命名

    执行语句 db.getCollection("A表").updateMany( {}, { $rename: { "A": "A1"} } ...

  5. 【原创】深入理解c++的右值引用

    0 左值和右值     一个左值表达式代表的是对象本身,而右值表达式代表的是对象的值:变量也是左值.   1 右值引用作用 为了支持移动操作(包括移动构造函数和移动赋值函数),C++才引入了一种新的引 ...

  6. Git 撤销所有未提交(Commit)的内容

    撸了好多代码,但是突然设计改了(~~o(>_<)o ~~):或者引入个第三方库,后来又发现用不着,想删掉,但文件太多了(比如几百个):那,怎么办呢,都不想了...Git 比人聪明,所以能很 ...

  7. Docker端口映射及创建镜像演示（二）--技术流ken

    前言 在上一篇博客<Docker介绍及常用操作演示--技术流ken>中,已经详细介绍了docker相关内容以及有关镜像和容器的使用命令演示. 现在我们已经可以自己下载镜像,以及创建容器了. ...

  8. Spring Cloud Config采用Git存储时两种常用的配置策略

    由于Spring Cloud Config默认采用了Git存储,相信很多团队在使用Spring Cloud的配置中心时也会采用这样的策略.即便大家都使用了Git存储,可能还有各种不同的配置方式,本文就 ...

  9. python下载安装BeautifulSoup库

    python下载安装BeautifulSoup库 1.下载https://www.crummy.com/software/BeautifulSoup/bs4/download/4.5/ 2.解压到解压 ...

  10. R语言实战（一）——基础入门

    从今天开始接触R语言,主要参考的书籍是<R语言实战>. 1.安装R语言程序 Windows:http://mirror.bjtu.edu.cn/cran/ Linux:apt-get in ...