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. oracle 树查询

    select LPAD('-----',t.menu_level)||t.obj_id,t.*,rowid from imes10dba.tb_adm_menu t start with t.pare ...

  2. go 依赖包管理工具gb安装报错

    尝试了下gb工具,发现有个问题: [root@etcd1 test]# go get github.com/constabulary/gb/... /home/gopath/src/github.co ...

  3. Android硬件抽象层(HAL)深入剖析(二)

    上一篇我们分析了android HAL层的主要的两个结构体hw_module_t(硬件模块)和hw_device_t(硬件设备)的成员,下面我们来具体看看上层app到底是怎么实现操作硬件的? 我们知道 ...

  4. [转] RabbitMQ介绍

    转自: http://lynnkong.iteye.com/blog/1699684 1      什么是RabbitMQ? RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初 ...

  5. android实例讲解----Tomcat部署Web应用方法总结

      参考文档:http://blog.csdn.net/yangxueyong/article/details/6130065  Tomcat部署Web应用方法总结             一.架构介 ...

  6. 解决MySQL出现大量unauthenticated user的问题

    近期OJ及相关的站点打开异常的慢,简直崩溃,一直没找着原因. 进入数据库server.进到mysql里,用show processlist命令查看一下,发现有非常多的unauthenticated u ...

  7. 使mysql按中文字段排序

    http://ourmysql.com/archives/391   测试后我发现,gbk不仅对字符内容是按拼音排序的,对数字也是一样,使用时需注意!     另外一篇文章: MySQL按中文拼音排序

  8. hdu 1081 &amp; poj 1050 To The Max(最大和的子矩阵)

    转载请注明出处:http://blog.csdn.net/u012860063 Description Given a two-dimensional array of positive and ne ...

  9. 笔记本POWER部分的应用——（MOS/LDO/BUCK BOOST）

    一.MOSFET 简介: 金属-氧化物半导体场效应晶体管,简称金氧半场效晶体管(Metal-Oxide-Semiconductor Field-Effect Transistor, MOSFET)是一 ...

  10. allegro设置鼠标滚轮放大缩小

    allegro设置鼠标滚轮放大缩小 allegro16版本以增加可以通过鼠标滚轮进行PCB的放大缩小.具体方法如下: 首先在HOME路径下找到PCBENV文件夹,进入该文件夹打开ENV文件. 在ENV ...