canvas基础—04像素延伸

最新推荐文章于 2023-04-17 16:59:10 发布
最新推荐文章于 2023-04-17 16:59:10 发布
阅读量254 收藏
点赞数
分类专栏： canvas基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaojsun/article/details/87286344
版权

1.像素坐标

demo.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas学习</title>
<style>
body{background: black;color:white;font-size:30px;}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1')
        var oGC = oC.getContext('2d')

        oGC.fillRect(0,0,100,100)
        var oImg = oGC.getImageData(0,0,100,100)
        alert(getXY(oImg,3,5))  //x列是4，y行是6  打印（0,0,0,255）

        //将这一行颜色设置成红色
        for(var i=0;i<oImg.width;i++){
            setXY(oImg,i,5,[255,0,0,255])
        }
        oGC.putImageData(oImg,100,100)

        
        // 返回该像素点的颜色
        function getXY(obj,x,y) {
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            var color = []

            color[0] = d[4*(y*w+x)]  //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            color[1] = d[4*(y*w+x)+1]
            color[2] = d[4*(y*w+x)+2]
            color[3] = d[4*(y*w+x)+3]
            return color
        }

        function setXY(obj,x,y,color){
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            var color = []

            d[4*(y*w+x)] = color[0] //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            d[4*(y*w+x)+1] = color[1]
            d[4*(y*w+x)+2] = color[2]
            d[4*(y*w+x)+3] = color[3]
        }
    }

</script>
</head>
<body>

<canvas id="c1" width="400" height="400">
	<span>不支持canvas浏览器</span>
</canvas>
</body>
</html>

效果

图示

 

2.例子之反色 

 注意：必须是同源的，意思不能用一个网上图片的连接

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas学习</title>
<style>
body{background: black;color:white;font-size:30px;}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1')
        var oGC = oC.getContext('2d')

        var yImg = new Image()
        yImg.onload = function(){
            draw(this)
        }

        yImg.src = '1.png'
        function draw(obj) {
            oC.width = obj.width
            oGC.drawImage(obj,0,0) // drawImage(oImg,x,y,w,h) 
            var oImg = oGC.getImageData(0,0,obj.width,obj.height)//获取图像数据（x,y,w,h）
            var w = oImg.width //图片一行的个数
            var h = oImg.height //图片一列的个数

            // 制作反色效果
            for(var i=0;i<h;i++){//每一行
                for(var j=0;j<w;j++){//每一列
                    var result = []
                    var color = getXY(oImg,j,i)//(x(j),y(i))
                    result[0] = 255 - color[0]
                    result[1] = 255 - color[1]
                    result[2] = 255 - color[2]
                    result[3] = 255
                    setXY(oImg,j,i,result)
                    // oGC.putImageData(oImg,100,obj.height)

                }
            }

            oGC.putImageData(oImg,0,obj.height)

        }

                // 返回该像素点的颜色
        function getXY(obj,x,y) {
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            var color = []

            color[0] = d[4*(y*w+x)]  //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            color[1] = d[4*(y*w+x)+1]
            color[2] = d[4*(y*w+x)+2]
            color[3] = d[4*(y*w+x)+3]
            return color
        }

        function setXY(obj,x,y,color){
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            d[4*(y*w+x)] = color[0] //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            d[4*(y*w+x)+1] = color[1]
            d[4*(y*w+x)+2] = color[2]
            d[4*(y*w+x)+3] = color[3]
        }
    }

</script>
</head>
<body>

<canvas id="c1" width="1000" height="1000">
	<span>不支持canvas浏览器</span>
</canvas>
</body>
</html>

注意，建议用火狐浏览器，其他浏览器会出去跨域问题

效果

3.例子之倒影  

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas学习</title>
<style>
body{background: black;color:white;font-size:30px;}
#c1{background: white}
span{color: white}
</style> 
<script type="text/javascript">
    window.onload = function(){
        var oC = document.getElementById('c1')
        var oGC = oC.getContext('2d')

        var yImg = new Image()
        yImg.onload = function(){
            draw(this)
        }

        yImg.src = '1.png'
        function draw(obj) {
            oC.width = obj.width
            oGC.drawImage(obj,0,0) // drawImage(oImg,x,y,w,h) 
            var oImg = oGC.getImageData(0,0,obj.width,obj.height)//获取图像数据（x,y,w,h）
            var w = oImg.width //图片一行的个数
            var h = oImg.height //图片一列的个数
             //***
            var newImage = oGC.createImageData(obj.width,obj.height)//createImageData(w,h)生成新的像素矩阵

            // 制作倒影效果
            for(var i=0;i<h;i++){//每一行
                for(var j=0;j<w;j++){//每一列
                    var result = []
                    var color = getXY(oImg,j,i)//(x(j),y(i))
                    result[0] = 255 - color[0]
                    result[1] = 255 - color[1]
                    result[2] = 255 - color[2]
                    result[3] = 255
                    setXY(newImage,j,h-i,result) //***

                }
            }

            oGC.putImageData(newImage,0,obj.height) //***

        }

                // 返回该像素点的颜色
        function getXY(obj,x,y) {
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            var color = []

            color[0] = d[4*(y*w+x)]  //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            color[1] = d[4*(y*w+x)+1]
            color[2] = d[4*(y*w+x)+2]
            color[3] = d[4*(y*w+x)+3]
            return color
        }

        function setXY(obj,x,y,color){
            var w =obj.width //100
            var h = obj.height //100
            var d = obj.data
            d[4*(y*w+x)] = color[0] //4(y*w+x)的结果是算出这一行以前的所有值，假设是一个10*10就好理解
            d[4*(y*w+x)+1] = color[1]
            d[4*(y*w+x)+2] = color[2]
            d[4*(y*w+x)+3] = color[3]
        }
    }

</script>
</head>
<body>

<canvas id="c1" width="1000" height="1000">
	<span>不支持canvas浏览器</span>
</canvas>
</body>
</html>

效果

4.例子之渐变透明

代码和上面的一样，只需要修改下面一句话

 

jiaojsun
关注
专栏目录
一种快速图形拉伸算法
派的无理性
10-28 5508
从数字图像处理的基本理论，我们可以知道：图像的变形变换就是源图像到目标图像的坐标变换。简单的想法就是把源图像的每个点坐标通过变形运算转为目标图像的相应点的新坐标，但是这样会导致一个问题就是目标点的坐标通常不会是整数，而且像放大操作会导致目标图像中没有被源图像的点映射到，这是所谓“向前映射”方法的缺点。所以一般都是采用“逆向映射”法。但是逆向映射法同样会出现映射到源图像坐标时不是整数的问题。这里就需
canvas 像素操作（图片像素操作）
qq_17627195的博客
08-01 2434
ImageData对象中的每个像素都保存了rgba色值的四个值，这四个值以数组形式存在，并存储于ImageData对象的data属性中，并且是将所有的像素的rgba信息存到了一个一维数组里面。getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。方法将图像数据（从指定的ImageData对象）放回画布上。方法直接看下面的教程就可以，一看就明白了。......
canvas画图时，图形被拉伸问题
lixianhaics的博客
06-18 9517
刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。<!doctype html> <html> <head> <meta charset='UTF-8'> <meta name='renderer' content='webkit'> <meta http-equiv='X-UA-Comp
Canvas设置宽高 绘图拉伸
u012214254的专栏
12-09 3417
每一届换任领导都要搞出一大堆的事情，首先会批判公司上届领导的产品规划的垃圾，然后再推翻垃圾换个模式以他所谓的新颖的超前的认知重新再来。新来的技术总监又搞出这一出，移动端由原生态完全转成H5，应公司的要求从Android开发转到Html5，没办法，要么忍要么滚，也快到年根儿了，静下心来好好学H5吧。从无到有的过程是相当的痛苦的，首先要面对的是从一个熟悉的领域快速步入到一个新的领域的跨度转变有点儿猝不
ImageView让图片像素延伸填满frame
zhbitxhd的专栏
05-09 3325
有些时候，在一些空间使用UIImageView的时候，b
Canvas基础知识1
路漫漫其修远兮，吾将上下而求索。
11-30 772
基础内容 <canvas> 标签只有两个属性—— width和height(可选)，默认值(width:300px，height:150px); 它们表示画布的实际宽度和高度，绘制的图形都在这上面。而style中的width和height则是canvas在浏览器中被渲染的宽度和高度。两者比例不一样会出现扭曲。 <canvas>标签的替换内容，不支持<canvas>的浏览器会忽略容器并在其中渲染后备内容。<canvas id="stockGraph" width="
HTML Canvas 基础
最新发布
TracyIverson的博客
04-17 444
​​是一个可以使用脚本绘制图形的元素。它可以用于绘制图表、图片和制作简单的动画。
html5 canvas 1像素线,html5 Canvas画图3：1像素线条模糊问题
weixin_32153867的博客
06-03 192
上次我们讲不事时功来这制请例在屏随会和时实于幻近支到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使况，如下图：这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。大家都知道屏浏。富混工就划这些本公的响示近览记的迹更幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出...
canvas基础简单易懂教程（完结，多图）
热门推荐
qq_45562973的博客
04-14 1万+
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 目录* Canvas学习 + 一、 Canvas概述 - 1.1 Hello world - 1.2 Canvas的像素化 - 1.3 Canvas的动画思想 - 1.4 面向对象思维实现canvas动
js+html5实现canvas绘制圆形图案的方法
10-24
需要注意的是，Canvas上的坐标原点(0, 0)位于左上角，x轴向右延伸，y轴向下延伸。因此，在`arc`方法中的`(95, 50)`表示圆心位于Canvas中心。 除了`arc`方法外，Canvas API还提供了其他绘制图形的方法，如`lineTo`...
最简单的canvas基础+实践，确定不进来看看嘛
发果叁
12-17 1546
怎么突然提到canvas呢❓其实是因为工作中有一个小需求，就是给特定的区域做水印😤，思来想去😎就选择使用canvas去做，简单效果如下：实现思路🤷‍♂️：封装一个全局指令（这里案列是私有指令），利用canvas画出一块带水印文字的背景图，然后在需要的地方使用就行（很简单吧🥰）。不过这个不是重点，这次我们的重点是canvas。canvas即画布的意思，是HTML5新增的元素🆕，主要用来绘制图形。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染😲。
canvas基础
xiaozhuo_tang的博客
01-24 246
Canvas基础 canvas在HTML中的代码 "myCanvas" width="300" height="300"> //writing some words here while broswer do not support canvas. //or some "" alt="" /> is cool too. canvas核心API 渲染上下文getContext
PixiJs学前篇（三）：Canvas基础【下篇】
sybh的博客
11-22 623
在上一篇文章PixiJs学前篇（二）：Canvas基础【中篇】中我们了解了Canvas的基本绘制形状，接下来我们看一下如何在 Canvas 中绘制文本。
canvas基础—03设置背景和渐变
jiaojsun的博客
02-13 1809
1.设置背景 demo.html createPattern(obj,'repeat') &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;canvas学习&lt;/title&gt; &lt;style&gt; body{backg
canvas基础—03插入图片
jiaojsun的博客
02-13 1805
1.插入图片 demo.html  drawImage(oImg,x,y,w,h) (当前图片，坐标x(正右),坐标y(正下),宽,高) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;canvas学习&lt;/title&gt; &lt;
canvas基础—04像素之马赛克
jiaojsun的博客
02-17 316
demo.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&g..
canvas基础—01绘制路径
jiaojsun的博客
02-12 254
1.标签、绘制环境、绘制方块、设置绘图 绘制方块  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;canvas学习&lt;/title&gt; &lt;style&gt; body{background: black} #c1{
canvas基础—01demo之（鼠标划线和方块制动）
jiaojsun的博客
02-12 238
1.鼠标划线 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta charset="utf-8"&gt;  &lt;title&gt;鼠标画线&lt;/title&gt; &lt;style&gt; body{background: black} #c1{background: white} span{colo
Canvas操作像素：实例演示与应用
本文将详细介绍如何利用Canvas API在Web应用中操作像素，尤其是针对现代浏览器中的视频处理。Canvas是HTML5中的一项强大工具，它允许开发者通过JavaScript在网页上绘制图形，包括动态渲染图像和视频。在这个教程中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值