HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
<!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的更多相关文章
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- HTML5 Canvas（实战：绘制饼图2 Tooltip）
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...
- HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2
事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1
canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...
随机推荐
- 2018-2019-2 20165212 《网络对抗技术》Exp3 免杀原理与实践
2018-2019-2 20165212 <网络对抗技术>Exp3 免杀原理与实践 一.实验内容 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion ...
- hdu5229
bc41第二题: 题意:两个人有 n 个串,随机选出两个串,可以进行这样的操作:①选一个串消去最后一个字符,②若两串相同则可以全部消去两串 若到某个人时正好消去两个串,则这个人胜另一人负,问先手胜概率 ...
- test20180919 区间最大值
题意 分析 我们将所有修改操作的左右端点都拿出来混合着排序. 然后扫描线一样扫描每个端点,维护一个堆储存当前最大值,然后就可以把这些修改操作分成O(m) 个不相交的区间,各自贡献独立. 复杂度为\(O ...
- JS前端数据多条件筛选(商品搜索)
有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛 ...
- ubuntu 安装php 报错解决
安装php时候遇到的问题: dpkg: 处理软件包 php7.1-opcache (--configure)时出错: 依赖关系问题 - 仍未被配置dpkg: 依赖关系问题使得 php7.1-readl ...
- sql server CLR
1. 配置sql server 启用CLR 在SQL Server2005/2008里面,CLR默认是关闭的.可以使用如下SQL语句开启CLR. sp_configure 'show advanced ...
- 2014华为机试西安地区A组试题
2014华为机试西安地区A组试题 题目一.分苹果 M个同样苹果放到N个同样篮子里有多少种放法,同意有篮子不放. 1<=M<=10.1<=N<=10 比如5个苹果三个篮子,3,1 ...
- 标 题: Re: 总感觉IT没我大山东啥事？
发信人: liuzhlai (liuzhlai), 信区: ITExpress 标 题: Re: 总感觉IT没我大山东啥事? 发信站: 水木社区 (Sat Aug 22 15:51:50 2015) ...
- numpy之meshgrid和where
meshgrid np.meshgrid() np.meshgrid从坐标向量返回坐标矩阵. 这样说可能很抽象.举个例子. x = np.arange(-2,2) y = np.arange(0,3) ...
- 使用redis防止商品超发
redis不仅仅是单纯的缓存,它还有一些特殊的功能,在一些特殊场景上很好用.redis中key的原子自增incrby和判断key不存在再写入的setnx方法,可以有效的防止超发. 下面使用两个不同的方 ...