1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
  9.         The current browser does not support Canvas, can replace the browser a try!
  10.     </canvas>
  11.  
  12.     <script>
  13.  
  14.         window.onload = function(){
  15.             var canvas = document.getElementById('canvas');
  16.  
  17.             canvas.width = 1024;
  18.             canvas.height = 2800;
  19.  
  20.             if(canvas.getContext('2d')){
  21.                 var context = canvas.getContext('2d');
  22.  
  23.                 // fill
  24.                 context.font = "bold 60px Arial";
  25.                 context.fillStyle = "#058";
  26.                 context.fillText("hello cynthia",40,100);
  27.  
  28.                 // stroke
  29.                 context.lineWidth = 1;
  30.                 context.strokeStyle = "red"
  31.                 context.strokeText("hello cynthia",40,200);
  32.  
  33.                 // font的第四个参数 控制文字长度
  34.                 context.lineWidth = 1;
  35.                 context.strokeStyle = "green"
  36.                 context.strokeText("hello cynthia",40,300,60);
  37.  
  38.                 // fill + linearGradient
  39.                 var linearGrad = context.createLinearGradient(0,0,300,0);
  40.                 linearGrad.addColorStop(0.0,'red');
  41.                 linearGrad.addColorStop(0.25,'yellow');
  42.                 linearGrad.addColorStop(0.5,'green');
  43.                 linearGrad.addColorStop(0.75,'blue');
  44.                 linearGrad.addColorStop(1.0,'pink');
  45.                 context.fillStyle = linearGrad;
  46.                 context.fillText("hello cynthia",40,400);
  47.  
  48.                 // fill + image背景
  49.                 var backgroundImage = new Image();
  50.                 backgroundImage.src = "img/1.png";
  51.                 backgroundImage.onload = function(){
  52.                     var pattern = context.createPattern(backgroundImage,'repeat');
  53.                     context.fillStyle = pattern;
  54.                     context.fillText("hello cynthia",40,500);
  55.                 }
  56.  
  57.                 // fill + image背景 + 描边
  58.                 var backgroundImage = new Image();
  59.                 backgroundImage.src = "img/1.png";
  60.                 backgroundImage.onload = function(){
  61.                     var pattern = context.createPattern(backgroundImage,'repeat');
  62.                     context.fillStyle = pattern;
  63.                     context.fillText("hello cynthia",40,600);
  64.                     context.strokeStyle = linearGrad;
  65.                     context.strokeText("hello cynthia",40,600);
  66.                 }
  67.  
  68.                 context.fillStyle="#508"
  69.                 // font-style 1.1
  70.                 context.font = "bold 40px sans-serif";
  71.                 context.fillText("CYNTHIA娆墨旧染",40,700);
  72.                 // font-style 1.2
  73.                 context.font = "italic bold 40px sans-serif";
  74.                 context.fillText("CYNTHIA娆墨旧染",40,800);
  75.                 // font-style 1.3
  76.                 context.font = "oblique bold 40px sans-serif";
  77.                 context.fillText("CYNTHIA娆墨旧染",40,800);
  78.  
  79.                 context.fillStyle="#485"
  80.                 // font-variant 1.1
  81.                 context.font = "small-caps bold 40px sans-serif";
  82.                 context.fillText("CYNTHIA娆墨旧染",40,900);
  83.  
  84.                 context.fillStyle="#234"
  85.                 // font-weight 1.1
  86.                 context.font = "lighter 40px sans-serif";
  87.                 context.fillText("CYNTHIA娆墨旧染",40,1000);
  88.                 // font-weight 1.2
  89.                 context.font = "normal 40px sans-serif";
  90.                 context.fillText("CYNTHIA娆墨旧染",40,1100);
  91.                 // font-weight 1.3
  92.                 context.font = "bold 40px sans-serif";
  93.                 context.fillText("CYNTHIA娆墨旧染",40,1200);
  94.                 // font-weight 1.4
  95.                 context.font = "boler 40px sans-serif";
  96.                 context.fillText("CYNTHIA娆墨旧染",40,1300);
  97.  
  98.                 context.fillStyle="#54b"
  99.                 // font-size 1.1
  100.                 context.font = "xx-small 40px sans-serif";
  101.                 context.fillText("CYNTHIA娆墨旧染",40,1400);
  102.                 // font-size 1.2
  103.                 context.font = "x-small 40px sans-serif";
  104.                 context.fillText("CYNTHIA娆墨旧染",40,1500);
  105.                 // font-size 1.3
  106.                 context.font = "small 40px sans-serif";
  107.                 context.fillText("CYNTHIA娆墨旧染",40,1600);
  108.                 // font-size 1.4
  109.                 context.font = "large 40px sans-serif";
  110.                 context.fillText("CYNTHIA娆墨旧染",40,1700);
  111.                 // font-size 1.5
  112.                 context.font = "x-large 40px sans-serif";
  113.                 context.fillText("CYNTHIA娆墨旧染",40,1800);
  114.                 // font-size 1.6
  115.                 context.font = "xx-large 40px sans-serif";
  116.                 context.fillText("CYNTHIA娆墨旧染",40,1900);
  117.  
  118.                 // textAlign
  119.                 context.fillStyle = "red";
  120.                 context.font = "bold 40px sans-serif";
  121.                     // 1.1
  122.                 context.textAlign = "left";
  123.                 context.fillText("textAlign=left",40,2000)
  124.                     // 1.2
  125.                 context.textAlign = "center";
  126.                 context.fillText("textAlign=center",40,2100)
  127.                     // 1.3
  128.                 context.textAlign = "right";
  129.                 context.fillText("textAlign=right",40,2200)
  130.  
  131.                 // Baseline
  132.                 context.fillStyle = "green";
  133.                 context.font = "bold 40px sans-serif";
  134.                     // 1.1
  135.                 context.textBaseline = "top";
  136.                 context.fillText("textBaseline=top",40,2300)
  137.                     // 1.2
  138.                 context.textBaseline = "middle";
  139.                 context.fillText("textBaseline=middle",40,2400)
  140.                     // 1.3
  141.                 context.textBaseline = "bottom";
  142.                 context.fillText("textBaseline=bottom",40,2500)
  143.  
  144.             }else{
  145.                 alert('当前游览器不支持Canvas，请更换游览器后再试！');
  146.             }
  147.         }
  148.  
  149.     </script>
  150. </body>
  151. <script>
  152.     /*文字
  153.  
  154.         context.font = "bold 40px Arial"
  155.  
  156.         context.fillText(string,x,y,[maxlen])
  157.  
  158.         context.strokeText(string,x,y,[maxlen])
  159.  
  160.         font 默认值 "20px sans-serif"
  161.  
  162.             font-style
  163.                 normal
  164.                 italic 斜体
  165.                 oblique 倾斜字体
  166.  
  167.             font-variant
  168.                 normal
  169.                 small-caps  英文小写
  170.             font-size
  171.                 xx-small
  172.                 x-small
  173.                 meium
  174.                 large
  175.                 x-large
  176.                 xx-large
  177.             font-family
  178.                 可以用逗号进行字体备选
  179.                 @font-face
  180.             font-weight
  181.                 lighter
  182.                 normal
  183.                 bold
  184.                 bolder
  185.  
  186.     文本对齐
  187.         //水平 以文字开始点的垂直线为基准
  188.         context.textAlign = lefe
  189.                             center
  190.                             right
  191.  
  192.         //垂直    以文字中心的水平线问基准
  193.         context.Baseline =  top
  194.                             middle
  195.                             bottom
  196.                             alphabetic （为拉丁字母做的基准线）
  197.                             ideographic （为方块文字做的基准线）
  198.                             hanging （为印度文做的基准线）
  199.     */
  200. </script>
  201. </html>

canvas-6font.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. CUDA并行编程思维过程

    CUDA并行编程思维过程 1)确定应用程序中需要且可以并行化的部分 2)将并行化代码中需要用到的数据分离出来,具体方法是用API函数在并行技术设备上分配内存空间 3)用API函数将数据传输到并行计算设 ...

  2. cobub razor 安装及使用

    server端安装及配置 apache2 + Mysql5.7 + php7 + redis 参见:http://docs.cobub.com/pages/viewpage.action?pageId ...

  3. 201621123018《java程序设计》第14周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 将 ...

  4. OkHttp 入门篇

    OkHttp是一个HTTP & HTTP2的客户端,能够用来进行Android 和 Java 开发. HTTP是现代应用的最基本的网络环境.让你的HTTP更加有效的工作能够让你的东西加载更快而 ...

  5. kubernetes集群搭建（7）：常见问题及处理

    尤其在创建pod的时候,会遇见各类问题,请通过下列命令来查看错误详情 kubectl describe pod xxxxxx 1.问题现象:镜像始终获取不下来 解决办法:为docker设置镜像源 [r ...

  6. spring boot log4j2配置

    [传送门]:log4j官网配置文件详解 1. 排除 spring boot 自带的  spring-boot-starter-logging 依赖 <dependency> <gro ...

  7. $.parseJson()定义和用法

    $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 例子: 这里首先给出JSON字符串集,字符串集如下: var data="  { ...

  8. 使用pipenv隔离不同项目的依赖包

    pipenv可以为不同的路径创建python环境和依赖包,结合pyenv可以达到为不同项目使用不同python版本,不同依赖包的目的. pip install pipenv #安装pipenv 使用p ...

  9. OpenMP初探

    OpenMP支持c.cpp.fortran,本文对比使用openmp和未使用openmp的效率差距和外在表现,然后讲解基础知识. 一.举例 1.使用OpenMP与未使用OpenMP的比较. OpenM ...

  10. python字符串操作简单方法

    1.join #将字符中的每一个元素按照指定分隔符进行拼接 test='你说话带空格' print(test) t=' ' x='_' print(t.join(test)) print(x.join ...