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. CSU1022: 菜鸟和大牛

    1022: 菜鸟和大牛 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 1390   ...

  2. mybatis中修改了数据，控制台显示成功，数据库没有修改

    在mybatis中遇到了修改数据时,控制台显示修改成功,但是去数据库查看并没有修改,这是因为mybatis不时自动提交事务的,所以是不会修改数据库的数据,这是我们加上一句 sqlSession.com ...

  3. 简述HTTP报文请求方法和状态响应码

    1. Method 请求方法,表明客户端希望服务器对资源执行的动作: 1.1 GET 向服务器请求资源. 1.2 HEAD 和GET方法的行为类似,但服务器在响应中只返回首部,不会返回实体的主体部分. ...

  4. NormalMap 法线贴图

    法线贴图+纹理贴图(细节明显) 纹理贴图 法线贴图 法线贴图 存储法线的一张贴图,归一化的法线的 xyz 的值被映射成为对应的 RGB 值.归一化的法线值为[-1,1],RGB的每一个分量为无符号的8 ...

  5. Git--使用须知123

    详细的篇幅以后补充 安装篇: 设置篇: 由于我们大多数是windows程序员,那么,在使用git的过程前需要做一些设置项. 1.换行符自动转换. 查看:git config --global --li ...

  6. 使用JS对form的内容验证失败后阻止提交

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  7. BNUOJ 1541 Air Raid

    Air Raid Time Limit: 1000ms Memory Limit: 10000KB This problem will be judged on PKU. Original ID: 1 ...

  8. 国内程序员的十大疑问之一：为什么老外不愿意用MyBatis？

    老外用MyBatis吗 昨天我在我在知乎看到了一张比较Hibernate和MyBatis使用情况的图,顺手发了条朋友圈: Hibernate vs MyBatis ,谁能告诉我什么样的国情导致了这么大 ...

  9. Window Pains（poj 2585）

    题意: 一个屏幕要同时打开9个窗口,每个窗口是2*2的矩阵,整个屏幕大小是9*9,每个窗口位置固定. 但是是否被激活(即完整显示出来)不确定. 给定屏幕状态,问是否可以实现显示. 分析:拓扑排序,把完 ...

  10. 【ZJOI2017 Round1练习&&BZOJ5353】D7T2 guess（费用流）

    题意: 思路: ..]of longint; pre:..,..]of longint; inq:..]of boolean; q:..]of longint; n,m,i,j,ans,tot,sou ...