使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下：

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 "butt"、"round"和"square"。默认值是"butt"。你可以点击这里查看lineCap的具体示例，以帮助你更好地理解lineCap。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。它将重置内存中现有的路径。
moveTo(int x, int y) 移动画笔到指定的坐标点(x,y)，该点就是新的子路径的起始点
lineTo(int x, int y) 使用直线连接当前端点和指定的坐标点(x,y)
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭(比如先调用了stroke())或者只有一个点，它会什么都不做。

在Canvas的图形绘制过程中，几乎都是先按照一定顺序先定下几个坐标点，也就是所谓的绘制路径，然后再根据我们的需要将这些坐标点用指定的方式连接起来，就形成了我们所需要的图形。当我们了解了CanvasRenderingContext2D对象的上述API后，那么绘制线条就显得非常简单了。

现在，我们就使用canvas来绘制最基本的直线

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5 Canvas绘制线条入门示例</title>

</head>

<body>

<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">

您的浏览器不支持canvas标签。

</canvas>

<script type="text/javascript">

//获取Canvas对象(画布)

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

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误

if(canvas.getContext){

    //获取对应的CanvasRenderingContext2D对象(画笔)

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

    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。

    //开始一个新的绘制路径

    ctx.beginPath();

    //定义直线的起点坐标为(10,10)

    ctx.moveTo(10, 10);

    //定义直线的终点坐标为(50,10)

    ctx.lineTo(50, 10);

    //沿着坐标点顺序的路径绘制直线

    ctx.stroke();

    //关闭当前的绘制路径

    ctx.closePath();

}

</script>

</body>

</html>

使用html5 Canvas绘制线条(直线、折线等)的更多相关文章

  1. HTML5 canvas绘制线条曲线

    HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...

  2. HTML5 Canvas 绘制库存变化折线 画入库出库柱状图

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. HTML5 Canvas 绘制库存变化折线 计算出库存周转率

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  4. HTML5 Canvas 绘制库存变化折线 计算出最高最低库存

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  5. HTML5 Canvas 绘制库存变化折线 增加超储告罄线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  6. HTML5 Canvas 绘制库存变化折线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  7. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

随机推荐

  1. angular 4 开发环境下打包文件过大

    angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...

  2. 【AtCoder】AGC013

    AGC013 A - Sorted Arrays 直接分就行 #include <bits/stdc++.h> #define fi first #define se second #de ...

  3. C语言之字符、整数、数组、字符串笔记

    菜单导航 1.变量在计算中的内存分配 2.字符char类型操作 3.整型数据类型操作 4.数组操作和元素地址分配分析 5.数组越界造成的访问不属于自己的内存空间现象 6.引用数据类型和基本数据类型,形 ...

  4. python全栈开发day54-mysql库操作、表操作、数据类型、完整性约束

    一.昨日内容回顾 1.mysql的安装 1).解压文件 添加环境变量bin 2).初始化mysql生成数据data文件夹: mysqld --initialize-insecure 3).mysqld ...

  5. Codeforces 830D Singer House 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF830D.html 题解 考虑用 $dp[i][j]$ 表示深度为 $i$ 的树里,有 $j$ 条路径的方案数 ...

  6. CodeSignal 刷题 —— almostIncreasingSequence

    Given a sequence of integers as an array, determine whether it is possible to obtain a strictly incr ...

  7. node 简单的爬虫

    基于express爬虫, 1,node做爬虫的优势 首先说一下node做爬虫的优势 第一个就是他的驱动语言是JavaScript.JavaScript在nodejs诞生之前是运行在浏览器上的脚本语言, ...

  8. Python并发复习１ - 多线程

    一.基本概念 程序: 指令集,静态, 进程: 当程序运行时,会创建进程,是操作系统资源分配的基本单位 线程: 进程的基本执行单元,每个进程至少包含一个线程,是任务调度和执行的基本单位 > 进程和 ...

  9. Apache系列：Centos7.2下安装与配置apache

    Centos7.2下安装与配置apache(一) 配置机:腾讯云服务器,centos7.2 一.安装Apache服务(Apache软件安装包叫httpd) yum install httpd -y 二 ...

  10. Django之win7下安装与命令行工具

    Django之win7下安装与命令行工具 下载安装 pip3 install django 注意:自动添加环境变量 测试是否安装成功 1.输入python 2.输入import django 3.输入 ...