首页 > 代码库 > HTML-Canvas03

HTML-Canvas03

2024-08-09 03:44:15   211人阅读

颜色合成 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="http://www.mamicode.com/face.jpg";img.onload = function() {ctx.drawImage(img,0,0);var imageData = http://www.mamicode.com/ctx.getImageData(0,0,250,250);>

　　技术分享

阴影效果：

ctx.shadowColor = "#f00"; //设置阴影颜色ctx.shadowBlur=10; //设置阴影的羽化量ctx.shadowOffsetX = 20; //设置阴影X 坐标移动量ctx.shadowOffsetY = 30; //设置阴影Y 坐标移动量var img = new Image();img.src= "http://www.mamicode.com/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 = http://www.mamicode.com/canvas.toDataURL("image/pgn");  document.getElementById("image_pgn").src = http://www.mamicode.com/image_pgn_src;>

    　　

HTML-Canvas03


联系
我们