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. ward's method分层聚类凝聚法

    ward's method是分层聚类凝聚法的一种常见的度量cluster之间距离的方法,其基本过程是这样的(参考:http://blog.sciencenet.cn/blog-2827057-9217 ...

  2. CF1137F Matches Are Not a Child's Play

    我们定义一棵树的删除序列为:每一次将树中编号最小的叶子删掉,将该节点编号加入到当前序列的最末端,最后只剩下一个节点时将该节点的编号加入到结尾.现在给出一棵n个节点的树,有m次操作: up v:将v号节 ...

  3. [NOIP2015]运输计划 题解

    题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条 航道连通了 L 国的所有星球. 小 P 掌管一 ...

  4. ruby的require路径问题

    ruby1.9删除当前目录功能,require "Action.rb"不行. 用下面2种方式: require_relative "trig.rb" .rb可以 ...

  5. windows10上使用一个tomcat部署2个项目

    前言:目前想在本机部署2个项目,网上查了之后,写下本篇随笔 1.准备工作 2.操作方法 3.运行2个项目 1.准备工作 2个war包(一个jprss.war和一个jenkins.war) 1个tomc ...

  6. Vue作用域插槽：用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  7. PS总结

    1.ALT:取消工具选择状态2. photoshopcs6 出现因为智能对象不能直接进行编辑    解决方案:右击---图层名---栅格化图层3.Shift+F5:填充画布颜色 4.PS不能变换路径, ...

  8. VS2012生成Web时报未能找到元数据文件xxx.dll

    问题:引用里已经添加了,还是报‘未能找到元数据文件xxx.dll’ 解决:添加了相同的不同路径的xxx.dll文件,删掉一个用不到的,就不报错了

  9. jmeter 添加header

    接口说明文档: article.fetch(通用转码服务) 通用转码服务,获取任意 url 的正文以及 title 等基本信息,仅支持 post 方法请求. 参数 参数 类型 是否必须 示例 其它说明 ...

  10. [Linux] 023 RPM 包校验与文件提取

    1. RPM 包校验 $ rpm -V 已安装的包名 选项 释义 -V (verify) 校验指定 RPM 包中的文件 (1) 验证内容中的 8 个信息的具体内容如下 信息名称 释义 S 文件大小是否 ...