html5--5-11 绘制文字

学习要点

    掌握文字的绘制方法

文字的绘制方法

    1. strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
    2. fillText("文字"，x,y,maxWith) 绘制实心
    3. 字体样式：font="大小 字体 ..."

矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()

绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)

绘制圆

  1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
  2. 在canvas元素中添加提示语句
  3. 添加script元素
  4. 获取画布/设置绘图绘图环境
  5. 指定线宽:lineWidth= 数值
  6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  7. 设定圆的基本参数：
    • 圆心的坐标:x,y
    • 圆的半径：数值
    • 起始弧度和终止弧度：角度值1，角度值2
    • 绘制方向：true（逆时针）/false（顺时针）
  8. 开始绘制：stroke()/fill（）

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 </body>

 </html><!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         canvas{background: #A9A9A0}

     </style>

 </head>

 <body>

     <canvas id="mycanvas" width="500px" height="300">

         您的浏览器暂不支持HTML5的canvas元素！！

     </canvas>

     <script type="text/javascript">

         //定义变量获取画布DOM

         var canvas=document.getElementById("mycanvas");

         //设置绘画环境为2d

         var context=canvas.getContext("2d");

         context.lineWidth=2;

         context.strokeStyle="#00FFFF";

         context.fillStyle="#FFA500";

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         context.beginPath();

         context.fillStyle="#A9A9A0";

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         //绘制文字

         context.beginPath();

         context.font="40px 隶书";

         context.strokeText("纵横",210,260);

         context.beginPath();

         context.fillStyle="#FFA500";

         context.fillText("纵横",210,260);

         //给扇子加字体

         context.beginPath();

         context.fillStyle="#000000";

         context.font="60px 隶书";

         context.fillText("纵",220,100);

         context.beginPath();

         context.strokeStyle="#FF0000";

         context.strokeText("横",220,140);

     </script>

 </body>

 </html>

html5--5-11 绘制文字的更多相关文章

  1. 借@阿里巴巴 耍了个帅——HTML5 JavaScript实现图片文字识别与提取

    写在前面 8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技 ...

  2. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

  3. Canvas入门（3）:图像处理和绘制文字

    来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...

  4. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

  5. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  6. C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字

    C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字 上一篇实现了把文字绘制到OpenGL窗口,但实质上只是把含有文字的贴图贴到矩形模型上.本篇我们介绍用Poi ...

  7. C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字

    C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字 +BIT祝威+悄悄在此留下版了个权的信息说: 上一篇得到了字形贴图及其位置字典(可导出为XML).本篇就利用此贴 ...

  8. IOS开发 图形绘制，绘制线条，矩形，和垂直和居中绘制文字

    概述 吐槽下IOS下 的图形绘图,代码冗长,不得不自己重新封装方法.整理形成本文. 绘制线 // 绘制直线 + (void)toDrawLineFromX:(CGFloat)x1 Y:(CGFloat ...

  9. 用TextPaint来绘制文字

    TextPaint是paint的子类,用它可以很方便的进行文字的绘制,一般情况下遇到绘制文字的需求时,我们一般用TextPaint所提供的方法.开始学习如何绘制文字之前,我们必须要先了解下androi ...

随机推荐

  1. PyTorch学习笔记之CBOW模型实践

    import torch from torch import nn, optim from torch.autograd import Variable import torch.nn.functio ...

  2. Android 蓝牙 笔记

    安卓:短信复制机制 软件识别蓝牙 软件可以读取蓝牙的信息 给蓝牙弄上一个类似于短信的东西 并且存一个短信 然后发到客户端 客户端 可以分类  分成表格 形式 这样做的目的是为了 让你的设备可以写蓝牙给 ...

  3. iOS集成百度地图方法步骤

    前言:app中的导航功能越来越流行,现在我自己做的项目中也有此需求,做过了后记录下笔记.  由于源代码保密所以这里仅仅提供demo,下面是效果图 一:iOS地图SDK 1.打开 百度地图api链接 i ...

  4. linux中断子系统：中断号的映射与维护初始化mmap过程

    本文均属自己阅读源代码的点滴总结.转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email:gzzaigcn2009@163.com 写在前沿: 好久好久没有静下心来整理一些东西了 ...

  5. 在pypy环境中运行odoo8

    PyPy是一个独立的解析器, 通过即时编译(JIT,Just-in-time)代码避免逐行解释执行来提升运行速度的(将编译过的行代码缓存起来,从而加快速度).我们一般使用的Python一般是使用C实现 ...

  6. pycharm5.0 激活方式

    Pycharm5注册方式   0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. ##注册方法2### 注册方法:   ...

  7. 【每日Scrum】第六天（4.16） TD学生助手Sprint1阶段性成果

    TD学生助手Sprint1阶段性成果(4.16) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 和叶姐,静姐修改页面布局和图片显示,保证界面的亲切. 和大家一起做演示PPT, ...

  8. libraries_v140_x64_py35_1.0.1.tar.bz2 libraries_v120_x64_py27_1.1.0.tar 下载链接以及百度云下载链接

    下载链接 wget  -c  https://github.com/willyd/caffe-builder/releases/download/v1.0.1/libraries_v140_x64_p ...

  9. 在Linux的Eclipse下搭建Android环境

    http://blog.csdn.net/lyonte/article/details/6407242 一.Java环境安装配置详见<在Linux下搭建Java环境>http://blog ...

  10. Sass编译css/Grunt压缩文件

    Sass安装(mac) $ sudo gem install sass scss编译成css文件 $ sass ui.scss ui.css CLI安装 $ npm install -g grunt- ...