8-15 globalCompositeOperation阶段练习二

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-15 课堂演示</title>

 </head>

 <style type="text/css">

 input{

         background: orange;

         width: 100px;

         height: 100px;

         border-radius: 100px;

         position: absolute;

         left: 825px;

         top: 200px;

     }

 </style>

 <body>

     <canvas id="canvas" width="800" height="500" style="background: #A9A9A9">

             很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <input type="button" onclick="gco()" value="合成">

     <select id="hc" size="11">

         <option value="source-over" selected="selected">source-over</option>

         <option value="source-atop">source-atop</option>

         <option value="source-in">source-in</option>

         <option value="source-out">source-out</option>

         <option value="destination-atop">destination-atop</option>

         <option value="destination-in">destination-in</option>

         <option value="destination-out">destination-out</option>

         <option value="destination-over">destination-over</option>

         <option value="lighter">lighter</option>

         <option value="copy">copy</option>

         <option value="xor">xor</option>

     </select>

     <script>

         var c=document.getElementById("canvas");

         var ctx=c.getContext("2d");

         var selectElement=document.getElementById('hc')

         function gco(){

             //alert(selectElement.value)

             ctx.clearRect(0,0,c.width,c.height)

             ctx.save()

             ctx.fillStyle="red";

             ctx.fillRect(400,200,150,150);

             ctx.globalCompositeOperation=selectElement.value;

             ctx.beginPath();

             ctx.fillStyle="blue";

             ctx.arc(400,200,100,0,2*Math.PI);

             ctx.fill();

             ctx.restore()

         }

     </script>

 </body>

 </html>

8-15 globalCompositeOperation阶段练习二的更多相关文章

  1. 8-13 canvas专题-阶段练习二（下)

    8-13 canvas专题-阶段练习二(下) <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  2. Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...

  3. [liusy.api-SMJ]-SMJ 介绍 学习阶段（二）

    我选择的是  Spring + Mybatis + Jesery 无状态架构方案. JAVA 比较常用的架构 SSH spring struts2 hibernate流行一阶段后, SSM   spr ...

  4. nyoj 15 括号匹配（二）动态规划

    当时看到(二)就把(一)做了, 一很容易,这道题纠结了好几天,直到今晚才看懂别人的代码谢,勉强才写出来.................... 不愧是难度6的题. #include <stdio ...

  5. NYOJ 题目15 括号匹配（二）（区间DP）

    点我看题目 题意 : 中文题不详述. 思路 : 本来以为只是个小模拟,没想到是个区间DP,还是对DP不了解. DP[i][j]代表着从字符串 i 位置到 j 位置需要的最小括号匹配. 所以初始化的DP ...

  6. [NYOJ 15] 括号匹配（二）

    括号匹配(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:6   描述 给你一个字符串,里面只包含"(",")","[&qu ...

  7. Beta阶段冲刺二

    Beta冲刺二 1.团队TSP 团队任务 预估时间 实际时间 完成日期 对数据库的最终完善 120 150 12.2 对学生注册功能的完善--新增触发器 150 140 11.29 对教师注册功能的完 ...

  8. 南阳理工大学oj 题目15 括号匹配（二）

    括号匹配(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:6   描述 给你一个字符串,里面只包含"(",")","[&qu ...

  9. Python学习：15.Python面向对象（二、继承的各种情况）

    一.什么是继承 继承是一种创建类的方法,在python中,一个类可以继承来自一个或多个父.原始类称为基类或超类. #创建父类 class Parent1: pass class Parent2: pa ...

随机推荐

  1. Buffer.allocUnsafe()

    Buffer.allocUnsafe(size) size {Number} 分配一个 size 字节大小的新的非零填充(non-zero-filled)的 Buffer.size 必须小于等于 re ...

  2. (十一)python3 encode()和decode()

    从英文意思上看,encode和decode分别指编码和解码.在python中,Unicode类型是作为编码的基础类型,即: decode encode str ---------> str(Un ...

  3. UvaLive 4872 Underground Cables （最小生成树）

    题意: 就是裸的最小生成树(MST), 完全图, 边长是实数. 分析: 算是复习一下MST把 方法一: prim 复杂度(n^2) #include <bits/stdc++.h> usi ...

  4. poj2325 大数除法+贪心

    将输入的大数除以9 无法整除再除以 8,7,6,..2,如果可以整除就将除数记录,将商作为除数继续除9,8,...,3,2. 最后如果商为1 证明可以除尽 将被除过的数从小到大输出即可 #includ ...

  5. 确定协议-通过分析系统阶段需要知道该系统能不能进行性能测试-Omnipeek

  6. Spring data jpa 复杂动态查询方式总结

    一.Spring data jpa 简介 首先我并不推荐使用jpa作为ORM框架,毕竟对于负责查询的时候还是不太灵活,还是建议使用mybatis,自己写sql比较好.但是如果公司用这个就没办法了,可以 ...

  7. 【ZJOI2017 Round1练习&BZOJ5350】D5T1 masodik（DP，斜率优化）

    题意:你要从(0,0)点走到(n,m), 每次只能往 x 轴或者 y 轴正方向移动一个单位距离.从(i,j)移动到(i,j+1)的代价为 ri,从(i,j)移动到(i+1,j)的代价为 cj. 求最小 ...

  8. 【Intellij 】Intellij IDEA 添加jar包的三种方式

    一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的lib目录下即可. 注意: 1.对于导入的eclipse项目,该方式添加的jar包没有任何反应,用make编译项目会报错 2.对于 ...

  9. Linux下C编程入门（1）

    Linux系统的介绍(以下以Manjaro最新版为例子): 一.系统的安装: 1.可以直接使用U盘做一个live usb的启动盘,在bios中设置从U盘启动即可拥有linux系统,如果是新式bios需 ...

  10. 交互设计：隐藏或显示大段文本的UI组件有哪些？

    应用场景: 在手机上要给列表中的每一项添加一个大段的介绍,应该用什么UI组件 A: 这里可以用,模态对话框,弹出提示,工具提示这类组件.模态对话框的好处,就是用关闭的按钮,用户操作方便:而弹出提示和工 ...