HTML5 Canvas 填充与描边(Fill And Stroke)

简介: HTML5 Canvas 填充与描边(Fill And Stroke)

HTML5 Canvas 填充与描边(Fill And Stroke)

演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实

现纹理填充与描边。

一:颜色填充与描边

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

如下:

// fill and stroke text

ctx.font = '60pt Calibri';

ctx.lineWidth = 3;

ctx.strokeStyle = 'green';


ctx.strokeText('Hello World!', 20, 100);


ctx.fillStyle = 'red';


ctx.fillText('Hello World!', 20, 100);


二:纹理填充与描边

HTML5 Canvas还支持纹理填充,通过加载一张纹理图像,然后创建画笔模式,创建


纹理模式的API为ctx.createPattern(imageTexture,"repeat");第二参数支持四个


值,分别为”repeat-x”, ”repeat-y”, ”repeat”,”no-repeat”意思是纹理分别沿着


X轴,Y轴,XY方向沿重复或者不重复。纹理描边与填充的代码如下:


var woodfill = ctx.createPattern(imageTexture,"repeat");


ctx.strokeStyle = woodfill;


ctx.strokeText('Hello World!', 20, 200);


// fill rectangle


ctx.fillStyle = woodfill;


ctx.fillRect(60, 240, 260, 440);

纹理图片:


三:运行效果

代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Fill And Stroke Text Demo</title>
<link href="default.css" rel="stylesheet" />
  <script>
    var ctx = null; // global variable 2d context
    var imageTexture = null;
    window.onload = function() {
      var canvas = document.getElementById("text_canvas");
      console.log(canvas.parentNode.clientWidth);
      canvas.width = canvas.parentNode.clientWidth;
      canvas.height = canvas.parentNode.clientHeight;
      
      if (!canvas.getContext) {
          console.log("Canvas not supported. Please install a HTML5 compatible browser.");
          return;
      }
      
      // get 2D context of canvas and draw rectangel
      ctx = canvas.getContext("2d");
      ctx.fillStyle="black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      // fill and stroke text
      ctx.font = '60pt Calibri';
      ctx.lineWidth = 3;
      ctx.strokeStyle = 'green';
      ctx.strokeText('Hello World!', 20, 100);
      ctx.fillStyle = 'red';
      ctx.fillText('Hello World!', 20, 100);
      
      // fill and stroke by pattern
      imageTexture = document.createElement('img');
      imageTexture.src = "../pattern.png";
      imageTexture.onload = loaded();
    }
    
    function loaded() {
      // delay to image loaded
      setTimeout(textureFill, 1000/30);
    }
    
    function textureFill() {
      // var woodfill = ctx.createPattern(imageTexture, "repeat-x");
      // var woodfill = ctx.createPattern(imageTexture, "repeat-y");
      // var woodfill = ctx.createPattern(imageTexture, "no-repeat");
      var woodfill = ctx.createPattern(imageTexture, "repeat");
      ctx.strokeStyle = woodfill;
      ctx.strokeText('Hello World!', 20, 200);
      
      // fill rectangle
      ctx.fillStyle = woodfill;
      ctx.fillRect(60, 240, 260, 440);
    }
    
  </script>
</head>
<body>
  <h1>HTML5 Canvas Text Demo - By Gloomy Fish</h1>
  <pre>Fill And Stroke</pre>
  <div id="my_painter">
    <canvas id="text_canvas"></canvas>
  </div>
</body>
</html>


相关文章
|
1月前
|
移动开发 前端开发 JavaScript
纯HTML5 Canvas实现的饼图
纯HTML5 Canvas实现的饼图
23 6
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示
39 4
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
21 3
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
23 3
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas实现360度全景图
HTML5 Canvas实现360度全景图
22 1
|
1月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
17 0
|
10天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
|
14天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
16天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
10 0
|
16天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
10 0