玩转html5canvas画图(11)

时间：2018-11-26

设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
    对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制

        imagedata:修改后的imagedata

        dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）

织梦内容管理系统

        dy:重绘图像的起点纵坐标 织梦内容管理系统

        //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata

本文来自织梦

        dirtyX:矩形左上角x轴坐标

织梦内容管理系统

        dirtyY:矩形左上角y轴坐标

        dirtyWidth:矩形长度 本文来自织梦

        dirtyHeight:矩形高度 织梦内容管理系统

织梦内容管理系统

1 function draw16(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = 'red' 7 //在右下角画一个正方形 8 context.fillRect(250,250,150,50); 9 var image = new Image(); 10 image.src = "Image/html5.jpg"; 11 12 image.onload = function () { 13 //在左上角画一幅图片 14 context.drawImage(image, 0, 0,200,200); 15 16 //实验证明imagedata取的是canvas所在范围画的图形，不止是图片 17 //不会取该区域内是空白的canvas的像素 18 var imagedata = context.getImageData(0, 0, 400, 300); 19 20 //修改imagedata 21 for (var i = 0, n = imagedata.data.length; i < n; i += 4) { 22 23 imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red; 24 imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green 25 imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue 26 //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a 27 } 28 context.putImageData(imagedata, 0, 0); 29 } 30 }

copyright dedecms

内容来自dedecms

内容来自dedecms

内容来自dedecms

绘制文字 dedecms.com

填充文字：context.fillText(text,x,y)  

绘制文字轮廓 context.strokeText(text,x,y)

     text:要绘制的文字

     x:文字起点的x坐标轴

dedecms.com

     y:文字起点的y坐标轴 织梦好，好织梦

     context.font:设置字体样式

     context.textAlign:水平对齐方式 内容来自dedecms

          start、end、right、center 内容来自dedecms

     context.textBaseline:垂直对齐方式 本文来自织梦

          top、hanging、middle、alphabetic、ideographic、bottom 织梦内容管理系统

     var length=context.measureText(text):计算字体长度(px)那么能不能计算高度啊，很遗憾，不能

上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解