demo.html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>绘制文字</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body   onload="init();">

<canvas  id="canvas" width="400"  height="300"  style="border:2px blueviolet solid"></canvas>

</body>

</html>

　　demo.js

 function init()  {

    var canvas=document.getElementById('canvas');

    var ctx=canvas.getContext("2d");

     ctx.textBaseline = 'top';

     ctx.fillStyle="red";

     ctx.font=" bold 34px 微软雅黑";

     ctx.fillText("你好",100,150);

     ctx.strokeStyle="blue";

     ctx.font=" italic 40px 宋体";

     ctx.strokeText("你好",100,200);

 }

　　效果：

2017-09-08   12:14:57

HTML5 canvas绘制文本的更多相关文章

  1. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  2. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  3. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  4. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  8. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  9. canvas绘制文本

    canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...

随机推荐

  1. 谈谈vue双向数据绑定问题

    vue是MVVM模型,vueObserver 数据监听器,把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.define ...

  2. XX-Net 使用教程（Across the Great Wall）

    注意: 由于封锁严重,软件自带IP已经被封杀殆尽.因此需要数分钟到数小时的初始化IP扫描,方能正常运行. 虽然系统内置了公共appid, 还是建议部署自己的appid,公共appid限制看视频.需要注 ...

  3. python中的方法使用

    #Python其实有3个方法,即静态方法(staticmethod),类方法(classmethod)和实例方法,如下: class Foo: def bar(self): # cls 是当前对象的实 ...

  4. BaseFragment 基类代码

    public abstract class BaseFragment extends Fragment implements IBaseView { private List<BasePrese ...

  5. （转）CoreDNS介绍

    转:https://www.colabug.com/4171614.html 本文介绍 CoreDNS 相关配置以及验证方法,实验环境为 Kubernetes 1.11,搭建方法参考 kubeadm安 ...

  6. ST表——————一失足成千古恨系列2

    在此先祝自己这个系列写的越少越好qwq(保证不超过4篇(flag已立)) 考试原题:(绝壁是看完复联出的) 第一反应:线段树??不对,是st表.嗯,没错.哎,st表咋写来着??完了凉了. 结果:写暴搜 ...

  7. python中w和wb文件写入的区别！

    一:基本区别:  w:是文本写入 wb:字节写入 windows中换行符是 \r\n w写入文件的时候,遇到 \n 自动替换成  \r\n

  8. TCP 为什么是三次握手，而不是两次或四次?

    记得第一次看TCP握手连接的时候,有同样的疑问,我的疑问是,为何不是两次呢?后来随着对网络的理解深入,明白TCP报文是交由IP网络来负责运输,IP网络并不能保证TCP报文到达目的地,既然IP网络是指望 ...

  9. python实现读取excel

    实现代码如下: #读取excel,将每行数据放入一个列表,将所有列表放入一个列表形成二维列表,返回该二维列表 import xlrd class ReadExcel: def read_excel(s ...

  10. Leapin' Lizards [HDU - 2732]【网络流最大流】

    题目链接 网络流直接最大流就是了,只是要拆点小心一个点的流超出了原本的正常范围才是. #include <iostream> #include <cstdio> #includ ...