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. 第三代DRDS分布式SQL引擎全新发布

    DRDS (阿里云分布式关系型数据库服务,https://www.aliyun.com/product/drds)于 4 月 30 号发布了 5.3 版本,这是一个年度大更新.主要带来了以下特性: 性 ...

  2. NoSQL数据库的分布式算法详解

    系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...

  3. Win7 64位系统 注册 ocx控件

    32位系统注册ocx就不谈了.网上一搜一大把.下面说下win7 64位 旗舰版下如果注册ocx控件    1.首先复制 XXXX.OCX文件到“C:\Windows\SysWOW64”目录. (XXX ...

  4. POJ - 3481 splay板子

    Double Queue 默写splay板子 很多细节问题... #include<cstdio> #include<iostream> using namespace std ...

  5. 【SpringBoot】 Java中如何封装Http请求，以及JSON多层嵌套解析

    前言 本文中的内容其实严格来说不算springboot里面的特性,属于JAVA基础,只是我在项目中遇到了,特归纳总结一下. HTTP请求封装 目前JAVA对于HTTP封装主要有三种方式: 1. JAV ...

  6. 《图解设计模式》读书笔记5-1 composite模式

    目录 代码 角色 想法 Composite模式即组合模式.它能够使容器和内容具有一致性,创造出递归结构. 举个例子:在文件系统中,文件夹既是内容,也是容器,具有一致性,这样一来,文件系统形成递归结构. ...

  7. vlan trunk配置

    vlan trunk配置 Trunk:中继干道 作用:一条链路能承载多个vlan的流量,并对不同vlan的流量进行不同标记 trunk能够使vlan跨越交换机 PT配置 配置vlan:两台交换机同样的 ...

  8. 【ABAP系列】SAP ABAP 总结常用术语简称解析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 总结常用术语简 ...

  9. Bootstrap 学习笔记6 列表组面板嵌入组件

    列表组组件: 面板组件:

  10. Tomcat各个版本的下载地址包括源码

    Tomcat各个版本的下载地址包括源码: http://archive.apache.org/dist/tomcat **************** 选择版本 **************** ** ...