hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

怎样运用HTML5 canvas绘制笔墨【html5教程】

2019-11-26HTML搜搜PHP网64°c
A+ A-
假如要运用HTML5 Canvas绘制笔墨,那末须要运用到画布上下文的fillText()要领。下面我们来看细致的内容。

我们先来看细致的示例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext('2d');
    context.font = 'normal 18pt "楷体"';
    context.fillText('Hello HTML Canvas World!', 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

申明:

下面的代码是猎取canvas对象并猎取上下文。

var canvas = document.getElementById('SimpleCanvas');
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var context = canvas.getContext('2d');

下面是绘制字符的代码。指定要在font属性中绘制的字符的字体信息。运用fillText()要领在画布上绘制一个字符串。作为第一个参数绘制的字符串,画图最先的X坐标和Y坐标被给予第二个和第三个参数。

context.font = 'normal 18pt "楷体"';
context.fillText('Hello HTML Canvas World!', 60, 200);

运转结果

运用Web浏览器显现上述HTML文件。取得下图的显现结果。

接下来我们来看怎样变动笔墨的色彩

代码以下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById('SimpleCanvas');
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext('2d');
    context.font = 'normal 18pt "楷体"';
    context.fillStyle = 'red';
    context.fillText('你好,ki4网!!!', 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

申明:

变动文本色彩,须要设置fillStyle属性为文本色彩。

 context.font = 'normal 18pt "楷体"';
 context.fillStyle = 'red';
 context.fillText('你好,ki4网!!!', 60, 200);

运转结果:

运用Web浏览器显现上述HTML文件。将取得以下图所示的结果,已绘制了赤色的字体。

以上就是怎样运用HTML5 canvas绘制笔墨的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
怎样运用HTML5 canvas绘制笔墨【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: