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就像一 ...
随机推荐
- 关于bfs时间轴
对于bfs,由于是通过不断将平行位置的元素加入到队列进行的,所以它在一定情况下淡化了与队列外部的 "时间" 联系观念,通过一个数组记录内部的 "时间" 这 ...
- exec函数簇
转自:http://www.cppblog.com/prayer/archive/2009/04/15/80077.html 也许有不少读者从本系列文章一推出就开始读,一直到这里还有一个很大的疑惑:既 ...
- pandas 里面对nan的判断
不要用math.isnan() pandas里专门有一个函数: age_null = pd.isnull(titanic_survival[‘age’])
- tomcat catalina.out切割脚本
shell脚本catalina.out 切割脚本...每天23.30切割.删除七天之前的日志这里3个tomcat实例(1)拷贝日志文件(2)清空日志文件*只能清空如果删除tomcat不重启不会生成新的 ...
- RAC4——架构和变化
1.RAC的架构 2.由单实例变RAC的变化 1.SGA的变化: 和传统的单实例相比,RAC 实例中SGA最显著的变化时多了一个GRD(Global resource directory)部分. ...
- Python之包管理工具：distutils、setuptools、distribute、setup.py、easy_install、easy_install、pip
在安装Python包的过程中,经常涉及到distutils.setuptools.distribute.setup.py.easy_install.easy_install和pip等等. 介绍:htt ...
- package.json 文件中的版本号
版本号,格式:"主要版本,次要版本,补丁版本" 指定版本:比如1.2.2,遵循"主版本,次要版本,补丁版本"的格式规定,安装时只安装指定版本. 波浪号(tild ...
- centos7 取消自动锁屏
CentOS7默认短时间会锁屏,这带来了一定的麻烦,比如看电影时,你不得不时不时的动动鼠标,才能防止锁屏.在网上查了一些资料,也没有找到相关的解决办法,不过最终还是找到了. 1.打开 applicat ...
- winform自定义控件 （转帖）
定义控件 本文以按钮为例,制作一个imagebutton,继承系统button, 分四种状态 1,正常状态 2,获得焦点 3,按下按钮 4,禁用 当然你得准备一张图片,包含四种状态的样式,同样你也可以 ...
- Unigui的Grid添加汇总栏