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. Swift：闭包(Closures)

    一. 基本概念 闭包(Closures)是自包括的功能代码块,能够在代码中使用或者用来作为參数传值. 在Swift中的闭包与C.OC中的blocks和其他编程语言(如C#)中的lambda, java ...

  2. DICOM：DICOM万能编辑工具之Sante DICOM Editor

    版权声明:本文为zssure原创文章,转载请注明出处,未经允许不得转载.   目录(?)[-] 背景 DICOM Service的配置 Sante DICOM Editor自启动的服务 PACS查询下 ...

  3. can-i-win（好）

    https://leetcode.com/problems/can-i-win/ package com.company; import java.util.*; class Solution { / ...

  4. 搭建windows下的odoo开发环境

    odoo运行环境的必须要要求是 python环境 postgreSQL数据 数据库可以安装在别的机器上,比如服务器:当然对于开发环境,通常,数据库与代码调试安装在同一台机器上. 首先安装 postgr ...

  5. js eval 解析字符串

    //带变量的字符串var str = 'var a=1; var b=2;'; eval(str); alert(a+b);//结果 3: //数组字符串var arrStr = "[1,2 ...

  6. 修改host文件原理 localhost，127.0.0.1之间有什么区别

    修改host文件原理http://www.zhihu.com/question/19782572 localhost与127.0.0.1的区别是什么 相信有人会说是本地ip,曾有人说,用127.0.0 ...

  7. 获取Android屏幕尺寸、控件尺寸、状态栏/通知栏高度、导航栏高度

    1.获取Android屏幕尺寸 我们能够通过getSize()方法获得屏幕的尺寸 Display display = getWindowManager().getDefaultDisplay(); P ...

  8. win7自带照片查看器

    win10如何找回自带的照片查看器   方法/步骤   1 首先,我们打开一个记事本,可以点击win+r打开运行框,然后在运行框中输入notepad.或者在桌面右键点击里面的新建,然后在新建中找到文本 ...

  9. C#读取自定义的config

    今天说下C#读写自定义config文件的各种方法.由于这类文章已经很多,但是大多数人举例子都是默认的在app.confg或者web.config进行读写,而不是一般的XML文件,我主要写的是一般的Xm ...

  10. Linux随笔记

    Linux配置apt-get源地址 以Ubuntu配置网易开源镜像站为例: 访问地址:http://mirrors.163.com/,找到对应的系统. 先将source.list进行备份,执行: su ...