Canvas 图形组合方式
时间:2022-05-03
本文章向大家介绍Canvas 图形组合方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/**
* 图形组合
*/
function initDemo5() {
var canvas = document.getElementById("demo5");
if (!canvas) return;
var context = canvas.getContext("2d");
var oprtns = [
"source-atop", // 新图形覆盖原有图形,新图形未重叠部分透明
"source-in", // 新图形覆盖原有图形,所有未重叠部分透明
"source-out", // 新图形的未重叠部分显示,原有图形和重叠部分透明
"source-over", // 新图形覆盖原有图形
"destination-atop", // 原有图形覆盖新图形,原有图形未重叠部分透明
"destination-in", // 原有图形覆盖新图形,所有未重叠部分透明
"destination-out", // 原有图形未重叠部分显示,新图形和重叠部分透明
"destination-over", // 原有图形覆盖新图形
"lighter", // 重叠部分颜色叠加
"copy", // 只显示新图形
"xor" // 所有未重叠部分显示,重叠部分透明
];
var index = 10; // 修改选择图形组合参数
context.fillStyle = "blue";
context.fillRect(10, 10, 165, 165);
context.globalCompositeOperation = oprtns[index]; // 设置图形组合方式
context.beginPath();
context.fillStyle = "red";
context.arc(165, 165, 120, 0, Math.PI*2, false);
context.fill();
context.closePath();
}
- Gravatar开发者手册
- Gravatar开发者手册
- 使用Google CDN服务提供的jQuery库
- 比特币的分叉币都认为能够取代比特币,事实真的是这样吗?
- Google官方网页载入速度检测工具PageSpeed Insights 使用教程
- ASP.NET 路由
- Kafka定时清除过期数据
- 腾讯高级副总裁郭凯天:打造腾讯智库分析互联网产业前沿问题
- Google Chrome 浏览器 开发者工具 使用教程
- 反向代理(Reverse Proxy)及 IIS 7 应用请求路由模块
- 2014腾讯“大数据连接的未来”高峰论坛在京召开
- 工作流、业务流程管理和SOA
- 面向对象设计的SOLID原则
- 用psake来简化自动化脚本的构建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vi 和 Vim 的使用
- k8s删除Terminating状态的命名空间
- CentOS7下vsftpd over SSL/TLS加密传输配置实践
- Xargs Sh -c Skipping the First Argument
- Centos系统安装
- Python 为什么能支持任意的真值判断?
- Python 为什么要在 18 年前引入布尔类型?且与 C、C++ 和 Java 都不同?
- Python计算大文件行数方法及性能比较
- docker容器部署Prometheus服务——云平台监控利器
- ASP.NET Core 奇技淫巧之接口代理转发
- 基于CDH(Cloudera Distribution Hadoop)的大数据平台搭建
- troubleshoot之:用control+break解决线程死锁问题
- Docker 三剑客之docker-compose
- 腾讯云 Severless-Express 项目开发和灰度发布最佳实践
- 在Docker中使用Redis