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就像一 ...
随机推荐
- spring boot redis -> @Cacheable，@CacheEvict, @CachePut
https://blog.csdn.net/eumenides_/article/details/78298088?locationNum=9&fps=1 https://www.cnblog ...
- JQuery实时监控文本框字符变化
$(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...
- dockercompose up build fail (node no such file or directory packages.json )
docker构建项目遇到如下问题: npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/lib/node_modules/iojs-bin/no ...
- day7 python学习
今日内容# 枚举 此代码可以用于对有一定值的列表进行按带序列号的方式打印出来 lis=['手机','电脑','潜艇','手表'] for index,i in enumerate(lis,1): pr ...
- smarty学习——内建函数 部分
Smarty自带一些内建函数. 内建函数是模板语言的一部分. 用户不能创建名称和内建函数一样的自定义函数,也不能修改内建函数. 一.包含的内建函数 {$var=...}{append}{assign} ...
- JMeter分布式部署的大致步骤以及误区解释
master和slave机要在同一网段内,才能做分布式(Jmeter要配环境变量,这样不用手动起server) 分布式不成功,解决方案: 1.master端和slave端要ping通 2.ping通后 ...
- js 逻辑的短路运算
&& 与运算 同时为true,才为true: 表达式1为false,不用看表达式2: || 或运算 有一个为true,就为true: 表达式1为true,不用看表达式2: && ...
- 深入理解ASP.NET MVC（1）
系列目录 ASP.NET MVC请求的服务过程 下图是书中的截图,表述了一次通常的ASP.NET MVC请求的服务过程: 从图中可以初步看出一个HttpRequest是如何被ASP.NET和ASP.N ...
- C# OracleBulkCopy 批量插入oracle数据库的方法
只有安装了oracle 11G客户端的机器上才可以用,要用到ODP.NET组件中的oracleDataAccess.DLL,命名空间引用为Oracle.DataAccess.Client; 引用:Or ...
- 关于 android 返回键 代码实现
转自:http://www.dewen.io/q/11313/android+%E6%A8%A1%E6%8B%9F%E8%BF%94%E5%9B%9E%E9%94%AE%E5%8A%9F%E8%83% ...