HTML5 canvas绘制文本
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绘制文本的更多相关文章
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- canvas绘制文本
canvas绘制文本 属性和方法 font = value 设置字体 textAlign = value 设置字体对齐方式 start, end, left, right, center textBa ...
随机推荐
- OC+RAC(六) 核心方法bind
-(void)_test6{ RACSignal *signal = [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> ...
- [CSP-S模拟测试]:赛（贪心+三分）
题目描述 由于出题人思维枯竭所以想不出好玩的背景.有$n$个物品,第$i$个物品的价格是$v_i$,有两个人,每个人都喜欢$n$个物品中的一些物品.要求选出正好$m$个物品,满足选出的物品中至少有$k ...
- 牛客 Rabbit的数列 （线段树维护值为x的个数+区间覆盖）
https://ac.nowcoder.com/acm/contest/907/C 链接:https://ac.nowcoder.com/acm/contest/907/C来源:牛客网 题目描述 Ra ...
- php面试专题---10、网络协议考点
php面试专题---10.网络协议考点 一.总结 一句话总结: 网络的考点其实就是这些:常见状态码,常见协议,osi七层模型,http和https 1.HTTP/1.1中,状态码200.301.304 ...
- Python3实现简单的钉钉机器人调用
具体可以参考开发文档:https://ding-doc.dingtalk.com/doc#/serverapi3/iydd5h from urllib import parse, request im ...
- Java多线程引例及实现多线程的方式
多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术. Java多线程是由JVM来实现,不必关心操作系统的调用问题. 假如我们要实现如下功能: public c ...
- eclipse下实现热部署，tomcat不重新reload context
1. 打开server的编辑器 2. 在modules页签内,修改auto load属性为disabled
- 设计模式 - 建造者模式 Builder Pattern
简介 场景 在创建复杂对象时,用户无须关心该对象所包含的属性以及它们的组装方式,只需要指定复杂对象的类型和内容就可以构建它们. 模式定义 建造者模式:将一个复杂对象的构建与表示分离,使得同样的构建过程 ...
- WCF身份验证之用户名密码认证
WCF支持多种认证技术,例如Windowns认证.X509证书.Issued Tokens.用户名密码认证等,在跨Windows域分布的系统中,用户名密码认证是比较常用的,要实现用户名密码认证,就必须 ...
- 【FICO系列】SAP FICO模块-财务账期的打开和关闭
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO模块-财务账期的 ...