canvas-6font.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
The current browser does not support Canvas, can replace the browser a try!
</canvas> <script> window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 2800; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); // fill
context.font = "bold 60px Arial";
context.fillStyle = "#058";
context.fillText("hello cynthia",40,100); // stroke
context.lineWidth = 1;
context.strokeStyle = "red"
context.strokeText("hello cynthia",40,200); // font的第四个参数 控制文字长度
context.lineWidth = 1;
context.strokeStyle = "green"
context.strokeText("hello cynthia",40,300,60); // fill + linearGradient
var linearGrad = context.createLinearGradient(0,0,300,0);
linearGrad.addColorStop(0.0,'red');
linearGrad.addColorStop(0.25,'yellow');
linearGrad.addColorStop(0.5,'green');
linearGrad.addColorStop(0.75,'blue');
linearGrad.addColorStop(1.0,'pink');
context.fillStyle = linearGrad;
context.fillText("hello cynthia",40,400); // fill + image背景
var backgroundImage = new Image();
backgroundImage.src = "img/1.png";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,'repeat');
context.fillStyle = pattern;
context.fillText("hello cynthia",40,500);
} // fill + image背景 + 描边
var backgroundImage = new Image();
backgroundImage.src = "img/1.png";
backgroundImage.onload = function(){
var pattern = context.createPattern(backgroundImage,'repeat');
context.fillStyle = pattern;
context.fillText("hello cynthia",40,600);
context.strokeStyle = linearGrad;
context.strokeText("hello cynthia",40,600);
} context.fillStyle="#508"
// font-style 1.1
context.font = "bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,700);
// font-style 1.2
context.font = "italic bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,800);
// font-style 1.3
context.font = "oblique bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,800); context.fillStyle="#485"
// font-variant 1.1
context.font = "small-caps bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,900); context.fillStyle="#234"
// font-weight 1.1
context.font = "lighter 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1000);
// font-weight 1.2
context.font = "normal 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1100);
// font-weight 1.3
context.font = "bold 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1200);
// font-weight 1.4
context.font = "boler 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1300); context.fillStyle="#54b"
// font-size 1.1
context.font = "xx-small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1400);
// font-size 1.2
context.font = "x-small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1500);
// font-size 1.3
context.font = "small 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1600);
// font-size 1.4
context.font = "large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1700);
// font-size 1.5
context.font = "x-large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1800);
// font-size 1.6
context.font = "xx-large 40px sans-serif";
context.fillText("CYNTHIA娆墨旧染",40,1900); // textAlign
context.fillStyle = "red";
context.font = "bold 40px sans-serif";
// 1.1
context.textAlign = "left";
context.fillText("textAlign=left",40,2000)
// 1.2
context.textAlign = "center";
context.fillText("textAlign=center",40,2100)
// 1.3
context.textAlign = "right";
context.fillText("textAlign=right",40,2200) // Baseline
context.fillStyle = "green";
context.font = "bold 40px sans-serif";
// 1.1
context.textBaseline = "top";
context.fillText("textBaseline=top",40,2300)
// 1.2
context.textBaseline = "middle";
context.fillText("textBaseline=middle",40,2400)
// 1.3
context.textBaseline = "bottom";
context.fillText("textBaseline=bottom",40,2500) }else{
alert('当前游览器不支持Canvas，请更换游览器后再试！');
}
} </script>
</body>
<script>
/*文字 context.font = "bold 40px Arial" context.fillText(string,x,y,[maxlen]) context.strokeText(string,x,y,[maxlen]) font 默认值 "20px sans-serif" font-style
normal
italic 斜体
oblique 倾斜字体 font-variant
normal
small-caps 英文小写
font-size
xx-small
x-small
meium
large
x-large
xx-large
font-family
可以用逗号进行字体备选
@font-face
font-weight
lighter
normal
bold
bolder 文本对齐
//水平 以文字开始点的垂直线为基准
context.textAlign = lefe
center
right //垂直 以文字中心的水平线问基准
context.Baseline = top
middle
bottom
alphabetic （为拉丁字母做的基准线）
ideographic （为方块文字做的基准线）
hanging （为印度文做的基准线）
*/
</script>
</html>
canvas-6font.html的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- 2019-4-25 html学习笔记
一.概念 文本 用于储存和记录文字信息的载体 html 超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...
- 判断字符串是否为正整数 & 浮点小数
/** * 判断字符串是否为数字(正整数和浮点数) * @param str * @return */public static boolean isNumeric(String str) { Str ...
- mybatis 控制台打印sql语句
其实很简单,打印SQL只需要加一个setting就可以了.亲测可用. mybatis-config.xml: <settings> <setting name=&quo ...
- MySQL备份---lvm snapshot
正常安装(缺点要锁表) 1, 创建一个LV(逻辑卷) , 把MySQL的数据目录放到这个LV上 /var/lib/mysql 对这个LV做快照, 从快照备份数据 删除快照 非正常安装 1,创建LV 2 ...
- $.parseJson()定义和用法
$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 例子: 这里首先给出JSON字符串集,字符串集如下: var data=" { ...
- spring boot 集成 Filter 的两种方式
两种方式:(两种方式同时存在时,@Bean优先@ServletComponentScan实例化,生成两个对象) 1)@ServletComponentScan注解+@WebFilter注解 2)@Be ...
- 【转】浮点数与IEEE 754
http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1. 什么是浮点数 在计算机系统的发展过程中,曾经 ...
- 课程三(Structuring Machine Learning Projects)，第二周（ML strategy（2）） —— 1.Machine learning Flight simulator：Autonomous driving (case study)
[中文翻译] 为了帮助您练习机器学习的策略, 在本周我们将介绍另一个场景, 并询问您将如何行动.我们认为, 这个工作在一个机器学习项目的 "模拟器" 将给一个任务, 告诉你一个机器 ...
- Django--自定义 Command 命令
Django 对于命令的添加有一套规范,你可以为每个app 指定命令.通俗一点讲,比如在使用manage.py文件执行命令的时候,可以自定制自己的命令,来实现命令的扩充. commands的创建 1. ...
- Java SE 9（JDK9）环境安装及交互式编程环境Jshell使用示例
目的 安装JDK 9, 练习Jshell工具的使用, 体验Java的交互式编程环境. 什么是Jshell 其实就是一个命令行工具,安装完JDK9后,可以在bin目录下找到该工具,与Python的解释器 ...