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上的,与 ...
随机推荐
- Android-Java-静态变量与静态方法&普通变量与普通方法（内存图 完整版）
描述Student对象: package android.java.oop12; // 描述Student对象实体 public class Student { private String name ...
- 背水一战 Windows 10 (92) - 文件系统: 读写“最近访问列表”和“未来访问列表”, 管理以及使用索引
[源码下载] 背水一战 Windows 10 (92) - 文件系统: 读写“最近访问列表”和“未来访问列表”, 管理以及使用索引 作者:webabcd 介绍背水一战 Windows 10 之 文件系 ...
- C语言小程序——推箱子（窄字符和宽字符）
C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...
- php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)
foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...
- cad.net 更改高版本填充交互方式为低版本样子
/// <summary> /// 修改cui,双击填充 /// </summary> /// https://blog.csdn.net/hfmwu/article/deta ...
- c# 遍历所有安装程序 获取所有已经安装的程序
/// <summary> /// 获取所有已经安装的程序 /// </summary> /// <param name="reg"></ ...
- 你可能不知道的viewport
概述 前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的.之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是 ...
- win10 插入16k采样的耳机无法播放和录音的问题定位
平时做智能耳机,需要经常在windows上测试不同采样率的声音信号.可是,最近在16k双声道输入的情况下, 无论系统都使用该耳机进行播放,该问题思索了好久,一直没有解决办法. 今天无意中使用了wind ...
- 【LeetCode】14. 最长公共前缀
题目 编写一个函数来查找字符串数组中的最长公共前缀.如果不存在公共前缀,返回空字符串 "". 示例 1:输入: ["flower","flow&quo ...
- 脚手架vue-cli系列五：基于Nightwatch的端到端测试环境
不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试 ...