canvas 画图的方式

html 代码

JS代码

var canvasa = document.getElementById('canvas_data_method');
var ctxa = canvasa.getContext('2d');

var canvasb = document.getElementById('canvas_img_method');
var ctxb = canvasb.getContext('2d');

var imageData;
var image = new Image()
image.src = 'girl.jpg'
image.onload = function () {
ctxb.drawImage(this, 0, 0, this.width, this.height)
imageData = ctxb.getImageData(0, 0, canvasb.width, canvasb.height)
console.log(imageData.data);
var cImage = ctxa.createImageData(canvasa.width, canvasa.height)







   // 使用Uint8ClampedArray格式展示图片
   for (var i = 0; i < imageData.data.length; i ++) { //随便改变一下RGB值
   cImage.data[i + 0] = imageData.data[i + 0] + 50
   cImage.data[i + 1] = imageData.data[i + 1] + 70
   cImage.data[i + 2] = imageData.data[i + 2]
   cImage.data[i + 3] = imageData.data[i + 3]
   }
console.log(cImage.data[0]);
ctxa.putImageData(cImage, 0, 0, 0, 0, canvasa.width, canvasa.height)
}

canvas 画图的方式相关推荐

HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
微信小程序用canvas画图并分享
最近开始做微信小程序,有这样一个需求: 从列表页进入详情,在每一个详情页面去分享,分享出来的图片是带有当前详情数据的图片如下图的列表: 分享出来的样子: 解决方案和思路:canvas画图生成图片上 ...
html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
js canvas 画图线程处理
canvas画图其实是个异步的过程,如果不按照下面的方式在回调中显示图片,就会发生第一次画图时,加载不出来的情况. /** *这里写成成员方法的样子,根据需要修改即可* 预加载画图,因为canvas画 ...
php绘图和canvas,html5 canvas画图实例用法汇总
HTML5 canvas画图HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript).不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务.get ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...
[转]html5 Canvas画图教程(1)—画图的基本常识
今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...

canvas 画图的方式

canvas 画图的方式相关推荐

最新文章

热门文章