画布

  1.添加canvas标签  可以通过CSS或者JS来设置canvs标签的width,height;Ps:

<canvas id="cvs"></canvas>

  2.Css设置canvs的width,height;

#cvs {
position: absolute;
top: 10px;
left: 10px;
width: 355px;
height: 647px;
border: 2px dashed green;
}

  3.通过JS设置width,height宽高

        var cvs = document.getElementById("cvs");
cvs.width = 300;
cvs.height = 500;

PS:通过JS和CSS 宽高的区别:

  比如一块宽1000的画布,你在画布左侧画了一条竖线,宽100像素。此时你把画布自身的width设为500,相当于把画布的右半边咔嚓掉了,但此时那竖线的宽度还是100。但如果你通过CSS来把画布的宽度变成500,那就相当于把画布由1000挤压到500,所以竖线的宽度变成了50.(这只是理论情况,实际上设置canvas的宽度时,他会清空掉已画出来的内容。。)Canvas自身的宽高就是画布本身的属性,而css给他的宽高则可以看作是缩放,如果你缩放的太过随意,那么画布上的图形可能变得你自己都认不出来。所以有个建议:除非特殊情况,一定不要用css来定义Canvas的宽高。

画笔

var ctx = cvs.getContext('2d');

开始画直线

  常用API:  

            //开始一条新路径/首次画可以不写
ctx.beginPath();
//设置画笔的起始位置点
ctx.moveTo(x,y);
//设置画笔移动的目的点
ctx.lineTo(x,y);
//设置画笔的大小
ctx.lineWidth = 10;
//setLineDash([x,y]) 设置所画的直线为虚线,x为线段距离,y表示线段的间隔,如果只有只有一个数 x=y;
ctx.setLineDash([x,y]);
//关闭路径
ctx.closePath();
//设置画笔描边时的样式
ctx.strokeStyle = 'red';
//设置画笔开始描边
ctx.stroke();
//设置画笔填充时的样式
ctx.fillStyle = 'red';
//设置画笔开始填充
ctx.fill();
       
/*
说明:
1.ctx.stroke(); 和 ctx.fill(); 是可以同时使用的;样式依然本身是不同的功能;
2.lineJoin 和 lineCap 区别:lineCap 是设置画笔本身末端的样式;而lineJoin是设置两条相交直线,交汇点的样式;需要注意;
*/

    lineJoin属性。lineJoin,意思即线的交汇处,有3个属性:miter(默认,尖角),bevel(斜角),round(圆角),如图6:

    lineCap属性,这个就是定义线条的端点。lineCap有3个值:butt(平,默认),round(圆),square(方),如图8

实例

  1.描边

        var ctx = cvs.getContext('2d');
ctx.moveTo(30,10);
ctx.lineTo(200,10);
ctx.lineTo(200,100);
ctx.lineTo(30,100);
ctx.closePath();
ctx.stroke();

  2.使用填充

            ctx.beginPath();
ctx.moveTo(30,150);
ctx.lineTo(200,150);
ctx.lineTo(200,250);
ctx.lineTo(30,250);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

  3. 设置虚线 setLineDash

            //开始一条新路径,重新设置起始点
ctx.beginPath();
ctx.moveTo(30,310);
ctx.lineTo(210,310);
ctx.lineTo(210,410);
ctx.lineTo(30,410);
ctx.lineWidth = 10;
//setLineDash([x,y]) 设置所画的直线为虚线,x为线段距离,y表示线段的间隔,如果只有只有一个数 x=y;
ctx.setLineDash([5]);
ctx.strokeStyle = 'red';
ctx.lineJoin = "round";
ctx.closePath();
ctx.stroke();

 4.设置 lineJoin

        var ctx = cvs.getContext('2d');
ctx.moveTo(30,10);
ctx.lineTo(200,10);
ctx.lineTo(200,100);
ctx.lineTo(30,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
ctx.lineJoin = "round";
ctx.closePath();
ctx.stroke();

canvas学习-----画直线的更多相关文章

  1. Path画直线与弧线

    代码地址如下:http://www.demodashi.com/demo/14754.html 前言 之前讲过Paint和Canvas的基本使用,今天来介绍下Path的使用 涉及内容有: Path画直 ...

  2. Html5新特性 &lt;canvas&gt;画板画直线

     以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  4. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  5. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  6. canvas学习总结三:绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  7. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  8. 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线

    众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...

  9. canvas学习(二):渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

随机推荐

  1. yum安装包另存

    yum install --downloadonly --downloaddir=/tmp <package-name> 1.yum已安装的列表 yum list installed

  2. Debian 9 源配置

    Debian 9: deb http://mirrors.163.com/debian/ stretch main non-free contrib deb http://mirrors.163.co ...

  3. linux系统切换用户

    无权限上传文件解决办法 1.当前登录的普通用户:user1/password1 2.切换到管理员(user2)用户: sudo su - user2 输入user2用户的密码:password2 或者 ...

  4. Ext需要的文件目录

    使用ext版本信息:ext-4.1.1a <!-- 下面是引入文件需要导入的文件信息 ext-all.css ext-all.js --><link rel="styles ...

  5. Android数据存储:SDCard

    Android数据存储之SDCard 0.获取sd卡路径. 1.讲述 Environment 类. 2.讲述 StatFs 类. 3.完整例子读取 SDCard 内存 0.获取sd卡路径 方法一: p ...

  6. Ex 3_17 无穷路径..._十一次作业

    (a) Inf(p)在p中出现了无穷多次,说明Inf(p)存在一个环当中,所以这个环的顶点肯定是某一个强连通部件的子集. (b) 若G中存在一条无穷路径,则G中至少存在一个环,且这个环至少有两个顶点, ...

  7. 玩树莓派(raspberry pi) 2/3 raspbian的遇到的一些问题

    raspberry pi买回来玩了一段时间,现在就记录一下入门遇到的一些问题吧. 首先是烧写镜像,和安装电脑系统是一样的道理. 先要有一个制作一个U启动盘.先将SD卡格式化,再用Win32DiskIm ...

  8. LeetCode(37): 每k个一组翻转链表

    Hard! 题目描述: 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一 ...

  9. java 判断字符串什么编码类型

    public static String getEncoding(String str) { String encode = "GB2312"; try { if (str.equ ...

  10. oneinstack如何安装ssl证书和配置Let's Encrypt免费SSL证书教程汇总(转)

    OneinStack包含以下组合:lnmp(Linux + Nginx+ MySQL+ PHP) LNMP安装SSL安全证书 部署HTTPS:https://www.gworg.com/ssl/309 ...