使用html5 Canvas绘制线条(直线、折线等)
使用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绘制线条(直线、折线等)的更多相关文章
- HTML5 canvas绘制线条曲线
HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...
- HTML5 Canvas 绘制库存变化折线 画入库出库柱状图
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 Canvas 绘制库存变化折线 计算出库存周转率
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
- HTML5 Canvas 绘制库存变化折线 计算出最高最低库存
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
- HTML5 Canvas 绘制库存变化折线 增加超储告罄线
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
- HTML5 Canvas 绘制库存变化折线
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
随机推荐
- Android设备一对多录屏直播--(UDP组播连接,Tcp传输)
原文:https://blog.csdn.net/sunmmer123/article/details/82734245 近期需要学习流媒体知识,做一个Android设备相互投屏Demo,因此找到了这 ...
- 移动端开发demo—移动端web相册（一）
本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...
- 最短路径(给定一个包含非负整数的 m x n 网格，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。 说明：每次只能向下或者向右移动一步。)
给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 例: 输入: [ [1,3,1], [1,5,1], [ ...
- hive有关函数
1.窗口函数2015年4月份购买过的顾客及总人数 select distinct name,count(1) over() as cnt from test_window_yfwhere substr ...
- Addition Chains POJ - 2248 （bfs / dfs / 迭代加深）
An addition chain for n is an integer sequence <a0, a1,a2,...,am=""> with the follow ...
- FZU 2254 英语考试 （最小生成树）
在过三个礼拜,YellowStar有一场专业英语考试,因此它必须着手开始复习. 这天,YellowStar准备了n个需要背的单词,每个单词的长度均为m. YellowSatr准备采用联想记忆法来背诵这 ...
- Java高级面试题解析（一）
最近,在看一些java高级面试题,我发现我在认真研究一个面试题的时候,我自己的收获是很大的,我们在看看面试题的时候,不仅仅要看这个问题本身,还要看这个问题的衍生问题,一个问题有些时候可能是一个问题群( ...
- Xamarin Essentials教程设备信息DeviceInfo
Xamarin Essentials教程设备信息DeviceInfo 设备信息包括设备类型.设备种类和操作系统.应用程序通过获取设备信息,可以判断当前程序是否适合在该设备上运行.例如,优酷提供TV ...
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- 通过ipmitool找回遗忘的iDrac地址
Background: 在使用Dell服务器的过程中,如果发生一下情况:可以进入系统,但是忘记iDrac卡的地址,在系统的某个Linux下,可以使用ipmitool这个工具来get一下硬件的信息,从而 ...