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. netty-类图对比

  2. Concurrency and Application Design (一)

    在计算机发展的早期,单位工作时间的最高限额是一台计算机可以执行通过CPU的时钟速度确定.但是,随着技术的进步和处理器设计变得更紧凑,热等物理约束开始限制处理器的最高时钟速度.因此,芯片制造商寻找其它的 ...

  3. 【Jpa hibernate】一对多@OneToMany，多对一@ManyToOne的使用

    项目中使用实体之间存在一对多@OneToMany,多对一@ManyToOne的映射关系,怎么设置呢? GitHub地址:https://github.com/AngelSXD/myagenorderd ...

  4. lfu-cache（需要O(1)，所以挺难的）

    https://leetcode.com/problems/lfu-cache/ 很难,看了下面的参考: https://discuss.leetcode.com/topic/69137/java-o ...

  5. EasyHook库系列使用教程之四钩子的启动与停止

    此文的产生花费了大量时间对EasyHook进行深入了解同一时候參考了大量文档 先来简单比較一下EasyHook与Detour钩取后程序流程 Detours:钩取API函数后.产生两个地址,一个地址相应 ...

  6. IOS 开发推荐经常使用lib

    1. Mantle Mantle 让我们能简化 Cocoa 和 Cocoa Touch 应用的 model 层.简单点说.程序中常常要进行网络请求,请求到得通常是 json 字符串.我们通常会建一个 ...

  7. USACO 1.2 Milking Cows (枚举)

    标记数组(哈希) 1e6的范围,开一个char数组全然能够,有人为1,无人为0,注意边界就可以.最后线性扫描就可以. 时间复杂度,应该是O(n),n为最后结束的时间. 缺点就是--比較慢 /* ID: ...

  8. [Maven实战]（9）传递性依赖

    了解Spring的朋友都知道.创建一个Spring Framework项目都须要依赖什么样的Jar包.假设不使用Maven,那么在项目中就须要手动下载相关的依赖.因为Spring Framework又 ...

  9. c语言知识点总结-------静态区、堆、栈、常量区等

    在C语言中地址占4个字节 1.编程语言发展 低级语言----->高级语言 机器语言 ---> 汇编---->高级语言(C语言.C++.JAVA等) 机器语言 :0101 0010 1 ...

  10. jvm基础(1)

    1.整型数和浮点型数的表示 原码:第一位为符号位(0为正数,1为负数). 反码:符号位不动,源码取反. 正数补码:和原码相同. 负数补码:符号位不动,反码加1. 例如5的二进制表示可以是0000010 ...