<!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 填充的图形 ( 一个箭头为例 )

     */

    context.beginPath();

    context.lineTo(200, 200);

    context.lineTo(500, 200);

    context.lineTo(500, 100);

    context.lineTo(700, 250);

    context.lineTo(500, 400);

    context.lineTo(500, 300);

    context.lineTo(200, 300);

    //context.lineTo(200, 200); //当用这种方式封闭的时候, 当线条的粗细较宽时, 会出现瑕疵

    context.closePath(); //封闭一个图形, 没有瑕疵, 推荐使用

    context.fillStyle = 'yellow'; //填充封闭图形的颜色,

    context.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) 

    context.lineWidth = 5;

    context.stroke(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )

</script>

HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill的更多相关文章

  1. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  2. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  3. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  4. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  5. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  6. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  7. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  8. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

    事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1

    canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...

随机推荐

  1. 来自官方的一些dbt 最佳实践

    限制对原始数据的依赖性 您的项目将取决于存储在数据库中的原始数据.我们建议制作所谓的“基本模型”,以最大限度地减少对原始数据表的依赖性.在此约定中,基本模型可以具有以下职责: 仅选择与当前分析相关的字 ...

  2. xhan/qqbot试用

    xhan/qqbot试用 啥是qqbot?基于WebQQ协议的QQ机器人.命令行工具,Hubot支持! 怎样安装?首先要安装CoffeeScript windows:安装nodejs:主页上就有下载C ...

  3. RAW+ASM 的RAC 安装文档

    实验平台:Oracle 10gR2 RAC + RHEL 4.0 +VMWare GSX 3.2.0 安装步骤: 1.安装前准备及OS安装配置 2.安装Oracle 10gR2 clusterware ...

  4. spring 核心思想：AOP 理解

    什么是AOP? AOP概念介绍 所谓AOP,即Aspect orientied program,就是面向方面(切面)的编程. 面向切面编程Aspect-Orlented-Programming,即AO ...

  5. C#重新启动时，关闭较早的进程

    WPF程序重新启动,如果有客户端进程存在,则关闭较早的进程 private static System.Threading.Mutex mutex; public App() { this.Start ...

  6. golang cannot assign to

    问题: # command-line-arguments .\example.go:22: cannot assign to m.V.(BasicMessage).Length 想在函数中修改inte ...

  7. 启动ECLIPSE时，提示找到不 eclipse\jre\bin\javaw.exe

    原因:在PATH中未配置 jre\bin目录 %JAVA_HOME%\jre\bin - 无论是用:D:\Asoft\Java\jdk1.7.0_45\jre\bin 还是:D:\Asoft\Java ...

  8. css-inline-block和float的布局二者择其一？

    几个月前,带着不甘和忐忑毅然决然的在亚马逊离职了,当时不知道对我来说是好是坏,现在看来,当初的选择还是蛮不错的.感觉在亚马逊的几个月貌似接触最多的就是wiki和tt了,怀着对技术热忱离开,拒绝了腾讯, ...

  9. Javascript作用域学习笔记（三）

    看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记:   1.javascript中的作用域和作用域链 +  每个函数在被调用时都会创建一个 ...

  10. springMVC学习(10)-上传图片

    需求:在修改商品页面,添加上传商品图片功能. SpringMVC中对多部件类型解析: 1)springmvc中配置: <!-- 文件上传 --> <bean id="mul ...