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. 监听UDP端口

    功能:监听服务器的UDP端口,输出端口接收的数据 #encoding:utf-8 import socket global udp global ip global port def listen_p ...

  2. 新手立体四子棋AI教程(4)——启发式搜索与主程序

    通过前面几篇文章的学习,我们的四子棋程序已经有了框架.搜索几大部分,但是还有着不少问题,我们的程序只能迭代很有限的步骤,导致棋力低下,在这一篇我们将通过启发式搜索极大的优化搜索效率. 一.原因 我们之 ...

  3. Codeforces 845D - Two TVs(贪心)

    原题链接:http://codeforces.com/problemset/problem/845/D 题意:一个人在驾照考试中,路边有“限速XX”.“没有限速”.“可以超车”.“不能超车”路牌, 以 ...

  4. 13 October

    树链剖分 http://www.lydsy.com/JudgeOnline/problem.php?id=1036 https://oi.men.ci/tree-chain-split-notes/. ...

  5. 影视感悟专题---1、B站-魔兽世界代理及其它乱七八糟

    影视感悟专题---1.B站-魔兽世界代理及其它乱七八糟 一.总结 一句话总结: 看过的东西都可以学下,这样既可以学习那些东西,都是对自己生活学习有帮助的,还可以弥补自己每天学的东西的不够 1.< ...

  6. 三层for循环求解组成三角形边的组合

    假设a.b.c是三角形的三条边,当三条边符合勾股定理时,即,a2+b2=c2 ,为直角三角形.若a.b.c均为小于等于50的整数,求能够组成直角三角形的所有组合.请显示边的各种可能组合情况,显示总的组 ...

  7. 设计模式 - 门面模式（Facade Pattern，也叫外观模式）

    简介 场景 将系统划分为若干个子系统有利于降低系统的复杂性,但是这会增加调用者的复杂性.通过引入 Facade 可以对调用者屏蔽系统内部子系统的细节. Java 中有多个日志库,例如 log4j.lo ...

  8. vue-slot的使用

    父组件在子组件内套的内容,是不显示的:vue有一套内容分发的的API,<slot>作为内容分发的出口,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如 ...

  9. Altium Designer(AD)使用笔记

    在PCB中间打洞,螺丝孔等 制作PCB螺丝孔 1 在Keepout层首先绘制一个圆形(矩形): 2 在绘制PCB时,选中该图形,Tool>>Convert>>create bo ...

  10. Hibernate异常：IllegalArgumentException

    异常信息: java.lang.IllegalArgumentException: attempt to create delete event with null entity at org.hib ...