UDN-企业互联网技术人气社区

板块导航

浏览  : 726
回复  : 3

[HTML5] HTML5 Canvas如何实现纹理填充与描边

[复制链接]
友美的小妹的头像 楼主
发表于 2015-7-23 17:18:47 | 显示全部楼层 |阅读模式

演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边。


一:颜色填充与描边


颜色填充可以通过fillStyle来实现,描边颜色可以通过strokeStyle来实现。简单示例


如下:


  1. // fill and stroke text
  2. ctx.font = '60pt Calibri';
  3. ctx.lineWidth = 3;
  4. ctx.strokeStyle = 'green';
  5. ctx.strokeText('Hello World!', 20, 100);
  6. ctx.fillStyle = 'red';
  7. ctx.fillText('Hello World!', 20, 100);
复制代码


二:纹理填充与描边


HTML5 Canvas还支持纹理填充,通过加载一张纹理图像,然后创建画笔模式,创建纹理模式的API为ctx.createPattern(imageTexture,"repeat");第二参数支持四个值,分别为”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是纹理分别沿着X轴,Y轴,XY方向沿重复或者不重复。纹理描边与填充的代码如下:


  1. var woodfill = ctx.createPattern(imageTexture,"repeat");
  2. ctx.strokeStyle = woodfill;
  3. ctx.strokeText('Hello World!', 20, 200);
  4. // fill rectangle
  5. ctx.fillStyle = woodfill;
  6. ctx.fillRect(60, 240, 260, 440);
复制代码

纹理图片:



三:运行效果


代码:


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="chrome=IE8">
  5. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  6. <title>Canvas Fill And Stroke Text Demo</title>
  7. <link href="default.css" rel="stylesheet" />
  8. <script>
  9. var ctx = null; // global variable 2d context
  10. var imageTexture = null;
  11. window.onload = function() {
  12. var canvas = document.getElementById("text_canvas");
  13. console.log(canvas.parentNode.clientWidth);
  14. canvas.width = canvas.parentNode.clientWidth;
  15. canvas.height = canvas.parentNode.clientHeight;
  16. if (!canvas.getContext) {
  17. console.log("Canvas not supported. Please install a HTML5 compatible browser.");
  18. return;
  19. }
  20. // get 2D context of canvas and draw rectangel
  21. ctx = canvas.getContext("2d");
  22. ctx.fillStyle="black";
  23. ctx.fillRect(0, 0, canvas.width, canvas.height);
  24. // fill and stroke text
  25. ctx.font = '60pt Calibri';
  26. ctx.lineWidth = 3;
  27. ctx.strokeStyle = 'green';
  28. ctx.strokeText('Hello World!', 20, 100);
  29. ctx.fillStyle = 'red';
  30. ctx.fillText('Hello World!', 20, 100);
  31. // fill and stroke by pattern
  32. imageTexture = document.createElement('img');
  33. imageTexture.src = "../pattern.png";
  34. imageTexture.onload = loaded();
  35. }
  36. function loaded() {
  37. // delay to image loaded
  38. setTimeout(textureFill, 1000/30);
  39. }
  40. function textureFill() {
  41. // var woodfill = ctx.createPattern(imageTexture, "repeat-x");
  42. // var woodfill = ctx.createPattern(imageTexture, "repeat-y");
  43. // var woodfill = ctx.createPattern(imageTexture, "no-repeat");
  44. var woodfill = ctx.createPattern(imageTexture, "repeat");
  45. ctx.strokeStyle = woodfill;
  46. ctx.strokeText('Hello World!', 20, 200);
  47. // fill rectangle
  48. ctx.fillStyle = woodfill;
  49. ctx.fillRect(60, 240, 260, 440);
  50. }
  51. </script>
  52. </head>
  53. <body>
  54. <h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>
  55. <pre>Fill And Stroke</pre>
  56. <div id="my_painter">
  57. <canvas id="text_canvas"></canvas>
  58. </div>
  59. </body>
  60. </html>
复制代码



相关帖子

发表于 2015-8-10 20:41:16 | 显示全部楼层
恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2015-8-14 20:20:47 | 显示全部楼层
无论是不是沙发都得回复下
使用道具 举报

回复

发表于 2015-8-15 09:18:40 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部