html5 Canvas绘制线条 closePath()实例代码

2016-02-19 12:44 19 1 收藏

最近很多朋友喜欢上设计，但是大家却不知道如何去做,别担心有图老师给你解答，史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发】

核心代码:

复制代码代码如下:
$(function(){
var can = $("#can").get(0);
var txi = can.getContext("2d");
txi.beginPath();
txi.moveTo(105,105);
txi.lineTo(105,45);
txi.lineTo(45,105);
txi.closePath();
txi.stroke();
txi.beginPath();
txi.moveTo(25,25);
txi.lineTo(100,25);
txi.lineTo(25,100);
txi.stroke();
})

复制代码代码如下:
canvas id="can" width="170" height="170"/canvas

closePath();将路径闭合
下图是一个用了，闭合，一个没有用：

来源:http://www.tulaoshi.com/n/20160219/1601765.html

上一篇：关于HTML5的22个初级技巧(图文教程)
下一篇： java入门之：初学Java注意什么？

看过《html5 Canvas绘制线条 closePath()实例代码》的人还看了以下文章更多>>

html5 Canvas绘制线条 closePath()实例代码 02-19
HTML5 Canvas——用路径描画线条实例介绍 02-19
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧 02-19
HTML5 canvas 基本语法 02-19
HTML5 Canvas概述 02-19
html5 canvas 简单画板实现代码 02-19
html5 canvas-1.canvas介绍(hello canvas) 02-19
用html5的canvas画布绘制贝塞尔曲线完整代码 02-19
HTML5 Canvas 起步(2) - 路径 02-19
HTML5 Canvas标签使用收录 02-19

html5 canvas 使用示例

标签： Web开发

复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" titleHTML5示例/title style type="text/css" #container{border:1px solid #ccc;width:800px;height:600px;position:relative;} canvas{position:absolute;top:0px;left:0px;z-index:1;} /style /head body select id="tools" option value="pen"铅笔/option op...

html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因

标签： Web开发

接上一篇canvas画线条教程上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图：这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理，以及解决它。大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。其实像素终究来...

html5 canvas 画图教程案例分析

标签： Web开发

虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。 Canvas，意为画布也。而Html5中的Canvas也真的跟现实生...

html5的画布canvas——画出弧线、旋转的图形实例代码+效果图

标签： Web开发

在做旋转操作之前一定要理解一句话：旋转的是画布的坐标系而不是图形本身，好了，理解了这一句话后，接下来的就很简单了。首先认识一下画圆的坐标：代码如下： script language="javascript" var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.arc(100,100,50,Math.PI*0.75,Math.PI*1.75,fals...

HTML5 Canvas自定义圆角矩形与虚线示例代码

标签： Web开发

HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。 HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过JavaScript语言的Object.prototype可以实现对对象Canv...

查看更多精彩>>