HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var context = canvas.getContext('2d'); /**
* canvas 线条绘制的 api ( 三条折现为例 )
*/
context.lineWidth = 10; //线条的粗细 context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
context.moveTo(100, 100); //起点
context.lineTo(200, 200); //下一个点
context.lineTo(200, 300); //下一个点
context.strokeStyle = 'red'; //线条的颜色
context.stroke(); //画线 context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
context.moveTo(150, 100); //起点
context.lineTo(250, 200); //下一个点
context.lineTo(250, 300); //下一个点
context.strokeStyle = 'blue'; //线条的颜色
context.stroke(); //画线 context.beginPath(); //开始一段全新的路径( 清空之前的所有路径点 )
context.moveTo(200, 100); //起点
context.lineTo(300, 200); //下一个点
context.lineTo(300, 300); //下一个点
context.strokeStyle = 'yellow'; //线条的颜色
context.stroke(); //画线
</script>
HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke的更多相关文章
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
- HTML5 Canvas ( 线段端点的样式 ) lineCap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- HTML5 CANVAS画图 beginPath和closePath
beginPath这个canvas函数我很早就讲过了,他的作用很简单,就是开始一段新路径,我们先来看下面的一小段代码: var ctx = document.getElementById('cvs') ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- Html5 Canvas一个简单的画笔例子
相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- Sereja ans Anagrams 优先队列控制
Sereja has two sequences a and b and number p. Sequence a consists of n integers a1, a2, ..., an. Si ...
- HDMI接口基本信息
一.HDMI基本概念1.HDMI标准的发展历史: 2002年12月9日,HDMI1.0版正式发布,标志着HDMI技术正式登上历史舞台. 2004年1月,HDMI1.1版发布. 2005年8月,HDMI ...
- stenciljs ionic 团队开发的方便web 组件框架
stenciljs 是ionic 团队开发的方便组件话开发的js 框架,具体以下特点 简单,零配置,简单的api,typescript 支持 性能,压缩之后6Kb,支持ssr,以及强大的原生web c ...
- Postman 常用测试结果验证及使用技巧
Postman的test本质上是JavaScript代码,通过我们编写测试代码,每一个tests返回True,或是False.每一个tests实际上就是一个测试用例 官方文档给出了很多验证方式,我们通 ...
- ZedGraph控件的使用
http://blog.chinaunix.net/uid-20776117-id-1847015.html 在我们编写程序的时候,有时候是要做一些统计的,为了达到一目了然的效果,饼状图,曲线图,柱状 ...
- bzoj 3572 [Hnoi2014]世界树——虚树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3572 关于虚树:https://www.cnblogs.com/zzqsblog/p/556 ...
- 【Reporting Services 报表开发】— 总结
一.环境搭建:安装SQL Server 2008 R2或SQL Server 2012过程略,这里我安装的是SQL Server 2012. 二.新建报表项目: 1.打开Visual Studio 2 ...
- 【selenium】XPATH语法（一）
XPath 使用路径表达式来选取 XML 文档中的节点或节点集.节点是通过沿着路径 (path) 或者步 (steps) 来选取的. 我们将在下面的例子中使用这个 XML 文档. <?xml v ...
- BaseDao的编写：实现 增，删，改，查，分页这些公共方法的编写
1.BaseDao接口 package com.learning.crm.base; import java.io.Serializable; import java.util.List; publi ...
- 动态爬虫——selenium2搭载phantomjs入门范例
这是我学习爬虫比较深入的一步了,大部分的网页抓取用urllib2都可以搞定,但是涉及到JavaScript的时候,urlopen就完全傻逼了,所以不得不用模拟浏览器,方法也有很多,此处我采用的是sel ...