HTML5 Canvas ( 线段的绘制 ) beginPath, moveTo, strokeStyle, stroke
2017-03-25 18:20
363 查看
<!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拖拽、移动 绘制图片可操作移动,拖动
- HTML5的CANVAS绘制线条,MOVETO和LINETO详解
- 利用Html 5的canvas标签绘制水流和水池动画
- h5中使用canvas绘制线段、多边形、圆、圆弧
- Canvas线段的绘制
- 千呼万唤 HTML 5 (8) - 画布(canvas)之绘制图形
- 【HTML】Canvas(2)-绘制文本
- HTML canvas绘制椭圆
- 【HTML】Canvas(1)-绘制图形
- 【实例】html5-canvas通过鼠标绘制线段
- 【HTML】Canvas(3)-绘制图片
- Canvas学习:绘制线段
- Html 5 Canvas绘制分形图Mandelbrot
- HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
- HTML 5 Canvas通过 JavaScript 来绘制
- [转]HTML5多点触摸演示源码(Canvas绘制演示)
- html5中canvas绘制线段
- Canvas绘制线段和圆
- HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect