html 5 createPattern(）函数，必须在服务器环境中才生效？

最新推荐文章于 2022-11-21 20:37:37 发布
最新推荐文章于 2022-11-21 20:37:37 发布
阅读量806 收藏
点赞数
分类专栏： html JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013182438/article/details/65631951
版权

今天在本地直接写了一个html文件，测试createPattern函数，但是规定路径中的图片就是不显示，最后放在本地的Apache服务器上就可以了

代码：

<!DOCTYPE html>
<html>
<body>


<img src="lamp.gif" id="lamp" />
 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,'repeat');
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

</script>

</body>
</html>

还没有找到确定原因，继续查找中~

xingyemeng1202
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
canvas 第二章createPattern
ly479488874的博客
03-25 1729
canvas 重要属性 createPattern 2.createPattern createPattern() 方法在指定的方向内重复指定的元素。 元素可以是图片、视频，或者其他 元素。 context.createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”); repeat 默认。该模式在水平和垂直方向重复。 repeat-x 该模式只在水平方向重复。 repeat-y 该模式只在垂直方向重复。 no-repeat 该模式只显
canvas实现方块运动
sweetllh的博客
06-13 1100
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body > <canvas id="mycanvas" style="border: 1px solid #000;"></canvas> </body>
HTML5中createPattern()
04-11 339
定义和用法 createPattern() 方法在指定的方向内重复指定的元素。 元素可以是图片、视频，或者其他 <canvas> 元素。 被重复的元素可用于绘制/填充矩形、圆形或线条等等。 JavaScript 语法： context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); 参...
HTML5 canvas createPattern() 方法,createLinearGradient()方法
wjy397的专栏
01-04 1091
在水平和垂直方向重复图像： JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,15
CanvasRenderingContext2D.createPattern()
shadow_yn的博客
03-21 995
createPattern()方法是为元素在指定的方向上设置重复模式的方法，（通俗些讲就是在画布中设置元素的平铺模式），此方法返回一个CanvasPattern对象，语法如下：ctx.createPattern(image, repetition);image： 做为重复图像源的 CanvasImageSource 对象。可以是下列之一： 1. HTMLImageElement (), 2
Html5网页JavaScript录制MP3音频
01-06
通过JavaScript，开发者可以在浏览器环境中实现音频的录制和播放，极大地扩展了Web应用的可能性。"Html5网页JavaScript录制MP3音频"这个主题，正是探讨如何利用HTML5的Web Audio API和MediaRecorder API来实现这一...
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
HTML5实现下雨 水波特效
03-26
在本文中，我们将深入探讨如何使用HTML5的Canvas API来实现一种令人印象深刻的视觉效果——下雨与水波特效。HTML5 Canvas是一个强大的图形绘制工具，它允许开发者通过JavaScript动态地在网页上绘制2D图像。结合CSS3...
HTML5页面，上下切换页面效果
12-05
在现代Web开发中，HTML5已经成为了构建交互式和动态网页的标准。HTML5引入了许多新的元素、API和功能，使得开发者能够创建出更加接近原生应用的用户体验。本主题聚焦于利用HTML5来实现页面之间的上下切换效果，这种...
html5全套参考手册
09-30
HTML5是现代网页开发的核心标准，它极大地扩展了HTML4的功能，增强了网页的交互性和表现力。本套参考手册集合了HTML5相关的多种技术，包括CSS2.0、CSS3.0、JavaScript、W3CSchool教程、jQuery1.7中文手册以及xHTML...
使用javaScript或jquery实现页面时钟走动效果(包含秒表计时), 和系统时间同步
04-03
使用简单的十行左右代码就可以实现html页面计时效果, 同系统时间同步, 并带有秒表实时走动效果哦,感谢大家的支持
学习Canvas基础-圆柱渐变、设置底纹（createPattern）
最新发布
qq_67983277的博客
11-21 502
学习Canvas基础-圆柱渐变、设置底纹（createPattern）
canvas笔记-设置底纹(createPattern相关)
IT1995的博客
06-01 1438
createPattern(img,repeat-style) 函数中第二个参数可以填写4个值，分别为： repeat-style:no-repeat、repeat-x、repeat-y、repeat 如下模板代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&...
Canvas学习Part1 - fillStyle、createLinearGradient() 、createPattern() 、createRadialGradient()
Super Livia
09-28 393
fillStyle 属性 用法：设置或返回用于填充绘画的颜色、渐变或模式。 基本用法 <canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext(.
html5 canvas createpattern,canvas的createPattern方法， 当图片比canvas大
weixin_39654352的博客
06-18 264
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var autoImg = document.createElement("canvas");var ctx2 = autoImg.getContext('2d');ctx2.canvas.width = 400;ctx2.canvas....
createPattern() 自定义宽高
lonecry的博客
01-05 2467
1、createPattern() 方法简介 　　createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。 　　（来自w3c school ：链接：http://www.w3school.com.cn/tags/canvas_createpattern.asp ）...
Spring Boot @Validated 中 @Pattern 注意事项：变量为 null 时 @Pattern 不生效
热门推荐
小狮子的博客
04-10 1万+
我发现 @Validated 注解在最后对 @Pattern 生效时居然使用的是org.hibernate.validator.internal.constraintvalidators.bv.PatternValidator.isValid(CharSequence value, ConstraintValidatorContext constraintValidatorContext)但是，我在一次学习别人的代码时发现，@Pattern 校验邮箱时，email参数不传时请求能正常通过。
canvas基础命令
sinat_24239191的博客
12-04 790
context.fillStyle="";//填充样式 context.fillRect(x,y,width,height)//画出一个矩形 context.strokeRect(x,y,width,height)//画出一个边框 context.strokeStyle=""//边框 context.lineWidth=1;//边框线宽 先定义颜色线宽再绘画图形，按顺序执行
h5的input标签pattern属性值正则表达式不起作用
weixin_45511886的博客
05-08 3888
当type="text"的时候pattern有作用, type="number"的时候, 不起作用 以下用一个小实例来写一下 结果： 不报错，type=“number” pattern="表达式"不起作用。 type=“text” pattern=“正则表达式” 起作用。 结论：还是要多试，弄了好一会，改了个type值就搞定了 查半天没有！ ...
js系列教程10-canvas绘图全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 9831
var mycanvas = document.getElementById("mycanvas"); if(mycanvas.getContext){ //判断浏览器是否支持 var context = mycanvas.getContext("2d"); //context是画布，getContext获取绘图上下文对象，也有名为WebG

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值