HTML-Canvas03
颜色合成 globalCompositeOperation 属性:
//先绘制一个图形。
ctx.fillStyle = "#00ff00";
ctx.fillRect(10,10,50,50);
//设置 lobalCompositeOperation 属性。
ctx.globalCompositeOperation = "source-over";
//source-over:新图像绘制于画布已由图像上方。 //默认
//绘制一个新图像。
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.arc(50,50,30,0,2*Math.PI);
ctx.fill();
ctx.globalCompositeOperation = "copy";
//copy:只图像绘新图像,删除其它图像。
ctx.globalCompositeOperation = "darker";
//darker:在图形重叠的地方,其颜色由两个颜色值相减之后决定。
ctx.globalCompositeOperation = "destination-atop";
//destination-atop:画布上已有的内容只会在它和新图像重叠的地方保留。
ctx.globalCompositeOperation = "destination-in";
//destination-in:画布上已有的内容和新图像重叠的地方,保留已有的内容。
ctx.globalCompositeOperation = "destination-out";
//destination-in:画布上已有的内容和新图像不重叠的地方,保留已有的内容。
ctx.globalCompositeOperation = "destination-over";
//destinationo-ver:新图像绘制在已由图像下面。
ctx.globalCompositeOperation = "lighter";
//darker:在图形重叠的地方,其颜色由两个颜色值相加之后决定。
ctx.globalCompositeOperation = "source-atop";
//source-atop:在与已有图形重叠的地方,才显示的绘制新图像。
ctx.globalCompositeOperation = "source-ind";
//source-in:在与已有图形重叠的地方,才显示的绘制新图像 ,忽略原有图像。
ctx.globalCompositeOperation = "source-out";
//source-out:在与已有图形不重叠的地方,才显示绘制的新图像。
ctx.globalCompositeOperation = "xor";
//xor:在重叠和正常绘制的其它地方的地方,图像都为透明。
颜色反转 :
var img = new Image();
img.src="face.jpg";
img.onload = function() {
ctx.drawImage(img,0,0);
var imageData = ctx.getImageData(0,0,250,250);
var pix = imageData.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];
}
ctx.putImageData(imageData,250,0);
}
阴影效果:
ctx.shadowColor = "#f00"; //设置阴影颜色
ctx.shadowBlur=10; //设置阴影的羽化量
ctx.shadowOffsetX = 20; //设置阴影X 坐标移动量
ctx.shadowOffsetY = 30; //设置阴影Y 坐标移动量
var img = new Image();
img.src= "face.jpg";
img.onload = function() {
ctx.drawImage(img,0,0);
}
自定义画板:
- 建立画板
var canvas = document.getElementById("myCanvas")
var ctx = canvas.getContext("2d");
//绘制一个黑色矩形为画板
ctx.fillStyle="black";
ctx.fillRect(0,0,600,300);
//定义一些标记
var onoff = false; //变量onoff 为判断是否按下鼠标
var oldx = -10; //由于鼠标是有大小的,这里减去 10.
var oldy = -10;
var linecolor = "white"; //线条颜色
var linw =4; //线条宽度
//添加鼠标事件 canvas.addEventListener("mousemove",draw,true); //注意鼠标事件是在画布“ canvas”上
的
canvas.addEventListener("mousedown",dowm,false);
canvas.addEventListener("mouseup",up,false);
//分别定义三个事件函数
function dowm(event) {
onoff = true; //设置为true,用于判断
oldx = event.pageX-10; //jQuery 事件(event)pageX 属性:
oldy = event.pageY-10;
}
function up() {
onoff = false;
}
function draw(event) {
if (onoff == true) {
var newx = event.pageX-10; //实时取得新的坐标
var newy = event.pageY-10;
ctx.beginPath();
ctx.moveTo(oldx,oldy);
ctx.lineTo(newx,newy);
ctx.strokeStyle = linecolor;
ctx.lineWidth = linw;
ctx.lineCap="round";
ctx.stroke();
oldx = newx; //在移动的过程中上一时新坐标变为下一时老坐标
oldy = newy;
};
} - 完整画板与导出功能:
//添加按钮
<butto style="width:80px;background-color:yellow;"
onclick='linecolor="yellow";'>YELLOW</button> //注意这里 onclick 为单引号。
//建立以个 <img>标签,在用 toDataURL 函数导出内容
//添加代码段
function copyimage(event) {
var image_pgn_src = canvas.toDataURL("image/pgn");
document.getElementById("image_pgn").src = image_pgn_src;
}
HTML-Canvas03的更多相关文章
- HTML5 Canvas圆盘抽奖应用(适用于Vue项目)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
随机推荐
- 移动端学习系列1--meta标签
<!-- 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏 --><meta name="apple-mobile-web-app-capable" co ...
- ubuntu 14.04 安装mysql server初级教程
序,mysql数据库是开源的,被大多数企业所使用 目录 一.apt-get install 软件安装原理剖析二.安装mysql server三.配置和管理msyql 一.apt-get install ...
- 对原型prototype的详解
刚开始接触对象原型时大脑就开始起义了,脑子就转不灵清了.就感觉怎么着这个概念就是灌输不进去,俗称断路.后面找了很多资料,最主要的还是要借助于<JavaScript语言精髓>这本书,让我对这 ...
- 三款SDR平台对比:HackRF,bladeRF和USRP
这篇文章是Taylor Killian今年8月发表在自己的博客上的.他对比了三款平价的SDR平台,认为这三款产品将是未来一年中最受欢迎的SDR平台.我觉得这篇文章很有参考价值,简单翻译一份转过来.原文 ...
- HDOJ 1026 dfs路径保存
#include<cstdio> #include<cstring> #include<cmath> ][]; #define inf 0xffffff int n ...
- Linux命令之exit - 退出当前shell【返回值状态】
原文链接:http://codingstandards.iteye.com/blog/836625 (转载请注明出处) 用途说明 exit命令用于退出当前shell,在shell脚本中可以终止当前 ...
- Linux下挂载NTFS格式的U盘或硬盘
我们知道在Linux下挂载fat32的U盘非常容易,使用mount /dev/drive_name /mnt/指定目录这样就可以挂载了,但是如果U盘或者硬盘的格式是NTFS的话,那么Linux是不能识 ...
- HDU 1003 Max Sum
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- ext树表+ZeroClipboard复制链接功能
效果图:
- LightOJ 1234 Harmonic Number (打表)
Harmonic Number Time Limit:3000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submi ...