<!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的更多相关文章

  1. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

  2. HTML5 Canvas ( 线段端点的样式 ) lineCap

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  5. HTML5 CANVAS画图 beginPath和closePath

    beginPath这个canvas函数我很早就讲过了,他的作用很简单,就是开始一段新路径,我们先来看下面的一小段代码: var ctx = document.getElementById('cvs') ...

  6. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  7. Html5 Canvas一个简单的画笔例子

    相比了下Qt quick的canvas和HTML5的canvas,发现HTML5 Canvas在同样绘制绘制操作下性能比Qt的canvas强很多,附上一个HTML5 canvas画笔一例子 var D ...

  8. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  9. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

随机推荐

  1. Patch打补丁学习笔记

    1.基本命令语法: patch [-R] {-p(n)} [--dry-run] < patch_file_name p:为path的缩写. n:指将patch文件中的path第n条’/’及其左 ...

  2. Oracle活动会话历史(ASH)及报告解读

    对于数据库运行期间的各种状态的实时监控以及相关性能数据捕获对于解决性能问题,提高整体业务系统运行效率是至关重要的.在Oracle数据库中,实时捕获相关性能数据是通过ASH工具来实现的.ASH通过每秒钟 ...

  3. admin.ModelAdmin 后台管理关联对象，某个字段怎么显示值

    admin.ModelAdmin 后台管理关联对象,某个字段如何显示值?对象 WxpAccount:              accountName = ... 对象 AccountMenu:    ...

  4. php设计模式：单例模式

    前些日子开始着真正的去了解下设计模式,开始么,简单地从单例模式开始,当然网上看了一些资料,单例模式比较好理解,看看介绍,然后看看代码基本也就能够理解了,设计模式这些的花点心思基本的是能够理解的,当然要 ...

  5. 关于IOS给我的启发

    用了将近一年半的iOS,从4到4S,iOS5到iOS6.这里谈谈自己对iOS的一些看法,以及这款移动操作系统给我的启发.我知道这个帖子发出来可能有点“危险”.我从不发水贴,这些积分都是大家给的,不是灌 ...

  6. java反射例子

    一.field.setAccessible()方法: setAccessible方法是干什么用的呢让我们来看一段代码吧: public class User { private String name ...

  7. Spring IOC - 控制反转(依赖注入) - 懒加载机制

    懒加载机制 Spring默认会在容器初始化的过程中,解析xml,并将单例的bean创建并保存到map中,这样的机制在bean比较少的时间问题不大,但一旦bean非常多时,Spring需要在启动的过程中 ...

  8. CentOS 静态IP设置&修改网卡名

    一.CentOS版本查看的方法 1. lsb_release -a (若报命令找不到,直接yum install lsb –y) 2. cat /etc/redhat-release 二.CentOS ...

  9. MySQL工具 Navicat

    F6打开命令行窗口 ctrl+shift+r  运行选中语句   #不过不建议使用,因为ctrl+r是执行当前所有语句,如果语句当中有delete update 后果不堪设想

  10. 终端直接执行py文件，不需要python命令

    然后给脚本文件运行权限,方法(1)chmod +x ./*.py方法(2)chmod 755 ./*.py (777也无所谓啦) 这个命令不去调整,会出现permission denied的错误终端直 ...