<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PaoPaoGame</title>
<!-- <script type="text/javascript" src="src/Main.js"></script> -->
<script type="text/javascript">
var context = null;
var image = null;
function loadImage() {
var main = document.getElementById("maincanvas");
if(main == null)
return false;
context = main.getContext("2d");
drawImage();
}
function drawImage() {
//反色效果
var imgSrc = document.getElementById("image");
context.drawImage(imgSrc, 0, 0);
var imgd = context.getImageData(0, 0, 398, 552);
var pix = imgd.data;
for(var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i];
pix[i + 1] = 255 - pix[i + 1];
pix[i + 2] = 255 - pix[i + 2];
}
context.putImageData(imgd, 0, 0, 398, 552);
//透明度效果
var imgSrc_alpha = document.getElementById("image_alpha");
context.drawImage(imgSrc_alpha, 400, 0, 398, 552);
var imgd_alpha = context.getImageData(400, 0, 398, 552);
var pix_alpha = imgd_alpha.data;
for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
pix_alpha[j] = pix_alpha[j] * 0.2;
}
context.putImageData(imgd_alpha, 400, 0, 398);
}
</script>
</head>
<body onLoad="loadImage()">
<canvas id="maincanvas" width ="800" height ="600" >
<img src="images/other/1.png" width="398" height="552" id="image" />
<img src="images/other/2.png" width="398" height="552" id="image_alpha"/>
Sorry, your browser doesn't support canvas, please use Firefox3.6+, Safari5+, Chrome, IE9 etc.
</canvas>
</body>
</html>
也可以外部调用JS
// JavaScript Document
Main.js
var main ;
var context = null;
function loadImage() {
main = document.getElementById("maincanvas");
if(main == null)
return false;
context = main.getContext("2d");
drawImage();
}
function drawImage() {
var image = new Image();
image.src = "images/other/kboom.png";
image.onload = function() {
context.drawImage(image, 0, 0);
var imgd_alpha = context.getImageData(0, 0, 398, 552);
var pix_alpha = imgd_alpha.data;
for(var j = 3, n = pix_alpha.length; j < n; j += 4) {
pix_alpha[j] = pix_alpha[j] * 0.2;
}
context.putImageData(imgd_alpha, 0, 0);
};
}
分享到：
相关推荐
###### (7) Invert 反色效果 - **用途**：反转图像的颜色。 - **参数说明**：无。 ```css .invert-effect { filter: invert(); } ``` ###### (8) Light 光源效果 - **用途**：模拟光源效果。 - **参数说明**...
- 说明：此滤镜用于设置元素的透明度，通过控制起始和结束的透明度值，以及透明度变化的样式，可以实现动态的透明度变化效果。 2. **Blur（模糊）** - 语法：`filter:Blur(Add=add,Direction=direction,Strength=...
通过使用特定的语法结构，开发者可以轻松地为页面元素添加各种视觉效果，如模糊、阴影、反色等。本文将详细介绍CSS滤镜的基本概念及其各个滤镜的功能与用法。 #### 一、CSS滤镜概述 CSS滤镜是一种可以在不改变HTML...
本教程将深入探讨CSS滤镜的详细解说及其实际应用，帮助你掌握这一核心技术。 首先，我们要理解CSS滤镜的基本概念。滤镜是一种可以改变HTML或SVG元素图像外观的CSS属性。它们可以用来实现如模糊、饱和度调整、颜色...
- `Invert`: 反色效果。 - `Light`: 添加光照效果。 - `Mask`: 使用遮罩。 - `RevealTrans`: 渐显过渡。 - `Shadow`: 添加阴影。 - `Wave`: 波浪效果。 - `Xray`: X光效果。 这些属性和选择器的组合使用可以创建...
毛玻璃效果，也称为模糊背景或焦外模糊，常见于现代界面设计中，为用户提供了一种柔和、半透明的视觉体验。 `filter: blur()`属性的语法如下： ```css filter: blur(add=add, direction=direction, strength=...
aplha:透明度，0-1之间的小数，值越大，不透明度越高 5.#rgb 16位数字 ：0-9和a-f 2.尺寸属性 1.作用 改变元素的宽度和高度 2.语法 width:宽度 取值：px % min-width:最小宽度 max-width:最大宽度 height...
Invert滤镜反转元素的颜色，实现反色效果。 9. **Mask滤镜**： `filter: Mask(Color=color);` Mask滤镜创建一个透明掩膜，`Color`参数定义掩膜颜色。 10. **Shadow滤镜**： `filter: Shadow(Color=color, ...
下面是一些常用的`filter`属性及其效果： - **Opacity**: 用于设置元素的透明度，值介于0到1之间，其中1表示不透明。例如： ```css .filter { filter: opacity(0.5); } ``` - **Blur**: 可以为图像应用高斯...