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. asp.net+扫描仪+图片上传

    问题: IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描 ...

  2. Queue1循环队列

    循环队列 1 #include<iostream> using namespace std; //#define maxSize 20 template <class T> c ...

  3. CodeForces - 1183H Subsequences (hard version) （DP）

    题目:https://vjudge.net/contest/325352#problem/C 题意:输入n,m,给你一个长度为n的串,然后你有一个集合,集合里面都是你的子序列,集合里面不能重复,集合中 ...

  4. IDEA搭建spingboot项目

    1.Springboot2.x是依赖于JDK1.8及以上版本的.因此先在电脑上安装JDK1.8,由于公司的项目用的是JDK1.7,所以要在JDK1.7的基础上在安装JDK1.8,让两者同时存在于电脑上 ...

  5. django缓存优化（二）

    一.缓存目的: 1.减小过载 2.避免重复计算 3.提高系统性能 二.如何进行缓存 三.缓存类型 四.缓存粒度分类 五.缓存的设置与使用 示例一: CACHES = { 'default': { 'B ...

  6. pandas 之dataFrame 数据显示不完全的解决方案

    对于这种省略部分,可以使用set_option进行设置,就可以看到了. # 显示所有行(参数设置为None代表显示所有行,也可以自行设置数字) pd.set_option('display.max_c ...

  7. Log4j Threshold、Append

    报错ERROR日志单独存放 Threshold属性可以指定日志level Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 比如我们指定某个a ...

  8. p4463 [国家集训队] calc

    分析 代码 #include<bits/stdc++.h> using namespace std; ][],Ans; inline int pw(int x,int p){ ; whil ...

  9. 前后端分离及React的一些研究

    前言 在对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境.以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了 ...

  10. Add hatch to bar plot

    function applyhatch(h,patterns,colorlist) %APPLYHATCH Apply hatched patterns to a figure % APPLYHATC ...