<canvas id="canvas3" width="250" height="300" style="background-color:black">
你的浏览器不支持 <canvas>标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
<input type="button" value="贴图" onclick="Patterns();" />
<input type="button" value="清空" onclick="ClearPatterns();" />
<script type="text/javascript">
//美女图的缩小版本
IMG_SRC_SMALL='data:image/gif;base64,/9j/4QDfRXhpZgAASUkqAAgAAAAFABIBAwABAAAAAQAAADEBAgAVAAAASgAAADIBAgAUAAAAXwAAABMCAwABAAAAAQAAAGmHBAABAAAAcwAAAAAAAABBQ0QgU3lzdGVtcyDK/cLrs8nP8QAyMDEwOjEwOjA0IDE1OjM5OjU3AAUAAJAHAAQAAAAwMjIwkJICAAQAAAAyODEAAqAEAAEAAAAXAAAAA6AEAAEAAAAeAAAABaAEAAEAAAC1AAAAAAAAAAIAAQACAAQAAABSOTgAAgAHAAQAAAAwMTAwAAAAAAAAAAD//gAqSW50ZWwoUikgSlBFRyBMaWJyYXJ5LCB2ZXJzaW9uIDEsNSw0LDM2AP/AABEIAB4AFwMBIQACEQEDEQH/2wCEAAMCAgICAQMCAgIDAwMDBAcEBAQEBAkGBgUHCgkLCwoJCgoMDREODAwQDAoKDxQPEBESExMTCw4VFhUSFhESExIBBAUFBgUGDQcHDRsSDxIbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbG//EAIgAAAIDAQAAAAAAAAAAAAAAAAUGBwgJBBAAAQMDAgQBCgcBAAAAAAAAAQIDBAUGEQcSAAghMRMJFRYiQVRhcZGUFBcyUVWB0eEBAQEBAQAAAAAAAAAAAAAAAAYHBQQRAAEEAQAHCAMAAAAAAAAAAAEAAgMRBBITMVFhcYEFISIkMjNB8LHR4f/aAAwDAQACEQMRAD8AtfYlwW1qbYUkTNE4k2lUxDbVClQ58eYanDypKnkltYLbfjoeSUEk5T6w6jgNp7YGoz/MnXo1w2LaVJsJhC0UZMWoOGoNOJWnHiIUpQUhaSpQIxjABA7cc2LK+OYn6Vo5Fy4mqkcaGwbj+vhSTWNPLaZjeNNfpqADtxIl4P8AScDpwH9CrI97oX3H/eErc6au4noEUdhQ34gL4lVCrKh5N/nfmNWRIq9wW1eVCefg0qZODrkaW2vOCdoCkFRO4pCVbVZG5ScKbbEvOu8y/KzqDOra49Oq9Iq8avR/Msh4luGWdjrKXF+uQnIWc9Tk+zGJ7nSPjx3vb6qNc6P5pL5vZNbv6otqlFp8CMtlL0ybtIy2uSp109sqGTn58CPwkH+Eqf0X/vAeHtrOcyy4dUd1pGwJz5/zXa3ymWvcEugh5yLV5C5sx57wHQXUJUhtsfrUnc25lI6AAE9s8C/J8sah2TpTfGqFQsBNctmt0dwiSZhaciNoCwtsJ2HcHAUnuQPDPbPFBvyhdVn6UmkBLzupJV3XpT4lPkLDzfjIebjMpaG9SlbN6s46429vkeE/8wnv2e+3XxP8bBLo7KLFhtaQ6rW9pPq/XKZbWoVjIrMGjvprqmHlbW3HglSMkJPrdCcg4Cvb8TerWpkKwOUG4G7NoEeKmLT10+JF8JLccLWnYjKU9AhO7sAc9uKA0yNiJJSeRzaHAXzWW9VtqsrqjTPnCOXlxkokK2kJXs6dMDoSrrn4444/Q2r+/RvqvjKbjaLQEf0Sv//Z';
function Patterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//创建图像对象
img=new Image();
//指定图像源
img.src=IMG_SRC_SMALL;
//图像被装入后触发
img.onload=function(){
//创建图案
var ptrn = ctx.createPattern(img,'repeat');
//将图案设置为填充样式
ctx.fillStyle = ptrn;
//填充画布
ctx.fillRect(0,0,250,300);
}
}
function ClearPatterns(){
///获取画布对象
ctx = document.getElementById("canvas3").getContext("2d");
//清空
ctx.clearRect(0,0,250,300);
}
</script>
分享到:
相关推荐
商业编程-源码-贴图论坛 edphpbbs.zip
3dmax插件神器-010-贴图收集.mse
3dmax插件神器-016-贴图找回.mse
3dmax插件神器-012-贴图更换器.mse
UDK虚幻引擎-贴图和材质 好资源免费共享
3dmax-贴图转英插件,有些中文不行,要英文才可以
Cocos2D-X开发学习笔记-贴图地图类的使用示例 教程地址:http://blog.csdn.net/yangyu20121224/article/details/10179471
3dmax插件神器-015-贴图批改中名.mse
3dmax插件神器-001-UVW贴图.mse
把带有Alpha通道的两个贴图混合在一起,效果类似UI上两个重叠的Image
算法主要利用把像素的颜色拆解出来 ARGB,之后获取每一个像素点的颜色值,并且把色彩图转成黑白图,通过黑白图求3-4个颜色的平均值实现png图片的透明贴图效果。 算法还可以实现修正贴图的位置,并处理超出边界的情况...
算法主要利用把像素的颜色拆解出来 ARGB,之后获取每一个像素点的颜色值,并且把色彩图转成黑白图,通过黑白图求3-4个颜色的平均值实现png图片的透明贴图效果。 算法还可以实现修正贴图的位置,并处理超出边界的情况...
MAX--角色贴图顶底渐变工具.zip
在cesium中,创建自定义的Geometry形状 并制定贴图规则 把图片作为材质贴到自己的geometry上 通过primitives加载自定义的geometry 可通过更换appearance实现动态切换图片
自动化 《互联网个人信息安全保护指南》若干要点解读 - 贴图 系统安全 企业安全 WEB应用防火墙 解决方案 安全集成
3dmax插件神器-014-材质贴图改名.mse
OpenGL系统设计-纹理贴图
游戏贴图资源-手绘地表山石贴图.
3dmax-找回贴图插件