canvas实现图像布局填充功能
更新时间：2017年02月06日 16:30:01 作者：蓝丶木鱼
这篇文章主要为大家详细介绍了canvas实现图像布局填充功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了canvas图像布局填充的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas-图像布局填充</title>
<style>
#canvas{
border: 1px solid palevioletred;
}
</style>
</head>
<body>
<canvas id="canvas" width="600px" height="600px">
</canvas>
<script>
//获取到canvas元素
var canvas = document.getElementById('canvas');
//获取canvas中的画图环境
var context = canvas.getContext('2d');
//创建Image对象
var img = new Image();
//alert(img);
//引入图片URL
img.src = "./image/huiji.png";
window.onload = function (){
//创建填充规则 .createPattern(图像对象,'规则'); 第二参数：repeat，no-repeat，repeat-x,repeat-y;
var pattern = context.createPattern(img,'no-repeat');
//设置填充属性
context.fillStyle = pattern;
context.fillRect(10,10,canvas.width,canvas.height);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
微信小程序bindinput与bindsubmit的区别实例分析
这篇文章主要介绍了微信小程序bindinput与bindsubmit的区别,结合实例形式分析了微信小程序bindinput与bindsubmit的具体功能、用法及相关使用区别,需要的朋友可以参考下2019-04-04
优雅而高效的JavaScript try...catch语句详解(js异常处理)
这篇文章主要给大家介绍了关于JavaScript中try...catch语句的相关资料,也就是js异常处理方法,try...catch是JavaScript中的错误处理机制,它的作用是捕获和处理可能发生的错误,以避免程序崩溃,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了微信小程序开发之IOS和Android兼容的问题的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
本文主要介绍了JavaScript中Array.from()的用法总结2023-05-05
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了2012-05-05
这篇文章介绍了JS实现定时自动消失的弹出窗口，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了javascript实现瀑布流的两种布局方式，一是绝对式布局、二是列式布局，详细介绍了这两种布局方式的原理，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了详解nuxt 微信公众号支付遇到的问题与解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
数组想必大家对它并不陌生吧，有些新手朋友们都不知道如何移除数组元素，下面为大家介绍个示例，喜欢的朋友可以了解下2013-09-09
这篇文章主要介绍了JS实现的车标图片提示效果代码,涉及JavaScript鼠标事件触发页面元素遍历修改的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论