canvas使用3

颜色合成 globalCompositeOperation 属性:

?
1
2
3
4
5
6
7
8
9
10
11
//先绘制一个图形。
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();

 

?
1
2
ctx.globalCompositeOperation = "copy" ;
//copy:只图像绘新图像,删除其它图像。

  

?
1
2
ctx.globalCompositeOperation = "darker" ;
//darker:在图形重叠的地方,其颜色由两个颜色值相减之后决定。

  

?
1
2
ctx.globalCompositeOperation = "destination-atop" ;
//destination-atop:画布上已有的内容只会在它和新图像重叠的地方保留。

  

?
1
2
ctx.globalCompositeOperation = "destination-in" ;
//destination-in:画布上已有的内容和新图像重叠的地方,保留已有的内容。

  

?
1
2
ctx.globalCompositeOperation = "destination-out" ;
//destination-in:画布上已有的内容和新图像不重叠的地方,保留已有的内容。

  

?
1
2
ctx.globalCompositeOperation = "destination-over" ;
//destinationo-ver:新图像绘制在已由图像下面。

  

?
1
2
ctx.globalCompositeOperation = "lighter" ;
//darker:在图形重叠的地方,其颜色由两个颜色值相加之后决定。

  

?
1
2
ctx.globalCompositeOperation = "source-atop" ;
//source-atop:在与已有图形重叠的地方,才显示的绘制新图像。

  

?
1
2
ctx.globalCompositeOperation = "source-ind" ;
//source-in:在与已有图形重叠的地方,才显示的绘制新图像 ,忽略原有图像。

  

?
1
2
ctx.globalCompositeOperation = "source-out" ;
//source-out:在与已有图形不重叠的地方,才显示绘制的新图像。

  

?
1
2
ctx.globalCompositeOperation = "xor" ;
//xor:在重叠和正常绘制的其它地方的地方,图像都为透明。

  

颜色反转 :

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}

  

阴影效果:

?
1
2
3
4
5
6
7
8
9
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);
}

  

自定义画板:

  • 建立画板
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    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;
    };
    }

      

  • 完整画板与导出功能:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //添加按钮
    <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;
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值