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 ...
随机推荐
- Django2 + ORM 做一个简单的登陆
. ├── db.sqlite3 ├── manage.py ├── myormLogin │ ├── __init__.py │ ├── __pycache__ │ │ ├── __ ...
- Xcode模拟器快捷键
command + 左右 = 横竖屏旋转 command + H + H = 切入层级后台模式
- Harbor修改暴露端口
把原来的端口映射改成1180 一 修改docker-compose.yml [root@topcheer ~]# cat /mnt/harbor/docker-compose.yml version: ...
- 20180805-Java ByteArrayOutputStream类
下面的例子演示了ByteArrayInputStream 和 ByteArrayOutputStream的使用: import java.io.* public class ByteStreamTes ...
- 第九届ECNU Coder K.计软联谊
题目链接:http://acm.ecnu.edu.cn/contest/16/problem/K/ 题目: K. 计软联谊 Time limit per test: 7.0 seconds Time ...
- 2017工业软件top100
- Jsoup代码示例、解析网页+提取文本
使用Jsoup解析HTML 那么我们就必须用到HttpClient先获取到html 同样我们引入HttpClient相关jar包 以及commonIO的jar包 我们把httpClient的基本代码写 ...
- 夜雨惊风 Linux下卸载openjdk,安装jdk
1.查看java版本 1 2 3 4 [root@CFDB2 ~]# java -version openjdk version "1.8.0_171" OpenJDK Runti ...
- ELK 日志系统入门及通过 Docker 部署
1. ELK 系统是什么 ELK 是一套日志中心解决方案,其三个字母分别表示: Elasticsearch:负责日志存储及检索 Logstash:负责日志收集.过滤及格式化 Kibana:数据看板,负 ...
- Xpath表达式的粗介绍
关于在自动化中Xpath表达式的书写,其实我也只是刚刚入门,粗略的跟着网上的教程学了一下,这篇我就来分享总结一下我学习到的知识. 首先呢,我们先认识一下什么是Xpath.Xpath是XML路径语言,它 ...