html5--5-3 给直线添加样式

学习要点

  • strokeStyle属性：设置颜色、渐变或模式（本节课只涉及到颜色）
  • lineWidth属性：--设置线宽

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径

绘制直线段流程:

    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()

实例

 <!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=10;

         //设置颜色

         context.strokeStyle="#FF0000";

         //用moveto设置起点

         context.moveTo(10,10);

         //用lineTo设置终点

         context.lineTo(100,100);

         context.lineTo(100,200);

         context.lineTo(200,200);

         context.lineTo(300,100);

         context.lineTo(10,10);

         //开始画线

         context.stroke();

     </script>

 </body>

 </html>

html5--5-3 给直线添加样式的更多相关文章

  1. html5 canvas 笔记二（添加样式和颜色）

    色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...

  2. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  3. 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  4. 深入理解HTML5：语义、标准与样式

    <深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...

  5. HTML5的新特性：范围样式，又叫做<style scoped>

    Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...

  6. 为html.EditorFor添加样式

    有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...

  7. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  8. JavaScript 应用开发 #5：为完成的任务添加样式

    判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...

  9. HTML添加样式三种办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. fastscripT实现权限控制

    fastscripT权限控制 此处以FASTSCRIPT实现功能权限为例,用脚本实现数据权限也是很方便的. unit Unit1; interface uses Winapi.Windows, Win ...

  2. c++ concurrency serial 1: introduction

    platform: vs2012 Code#include <iostream> #include <thread> using namespace std; void Fun ...

  3. 第十讲_图像检索 Image Retrieval

    第十讲_图像检索 Image Retrieval 刚要 主要是图像预处理和特征提取+相似度计算 相似颜色检索 算法结构 颜色特征提取:统计图片的颜色成分 颜色特征相似度计算 色差距离 发展:欧式距离- ...

  4. PS 基础知识 CMYK全称是什么

    已解决 请问谁知道CMYK四色的英文全称? 悬赏分:20 - 解决时间:2006-9-6 16:23 C代表什么颜色?英文全称是什么? M代表什么颜色?英文全称是什么? Y代表什么颜色?英文全称是什么 ...

  5. JavaScript技巧手冊

    js小技巧 每一项都是js中的小技巧,但十分的有用! 1.document.write(""); 输出语句  2.JS中的凝视为//  3.传统的HTML文档顺序是:documen ...

  6. Odoo multiprocessing

    Odoo 在 非 windows 系统下, 支持 并行处理,开启 workers 配置项 即可.     odoo有以下配置项 跟 并行处理有关     配置项 帮助信息 解说 limit_memor ...

  7. 安装odoo 9实录

    安装Ubuntu,省略 下载 odoo源码 使用 git 下载源码 mkdir /opt/openerp/server cd /opt/openerp/server git clone https:/ ...

  8. MySQL双主热备问题处理

    1. Slave_IO_Running: No mysql> show slave status\G *************************** 1. row *********** ...

  9. initializer_list、初始化列表、列表初始化

    什么是列表初始化 使用一个花括号来初始化变量,表现形式如下: std::vector<int>a{1,2,3,4,5}; 或者 std::vector<int>a = {1,2 ...

  10. Flash文字效果

    flash中增加文本.使用了消除锯齿:可读性消除锯齿.发现不嵌入字体的无法动态改动里面的文字,但嵌入字体的话会造成swf文件过大. 终于还是选择了使用设备字体,并选择了黑体.出了一个问题.文字没有加粗 ...