canvas 绘制直线的API有:

1.moveTo()起点坐标。

2.lineTo()绘制的直线

3. fillStyle以及 flii()是绘制实体的

4. strokeStyle 和stroke()用来绘制边框的

5. beginPath()和closePath()开始新的状态。

注意:

1.canvas的作用于直线的时候是基于状态的处理。一般都在beginPath()和closePath() 中使用

线条line的各种属性:

1.lineWidth

2.lineCap有几个值butt(default),round,square等,作用于非链接处。

3.lineJoin 的值有miter(default),bevel,round作用于链接处。这里的注意一点是:miter的时候有个默认的

miterlimit=10。如果尖锐程度超过10则会转成bevel。当然可以手动的调节miterlimit值大小。

在进行图形变换的时候,有以下变换函数:

translate(x,y)平行的位移

rotate(deg) 旋转度

scale(sx,sy)缩放的倍数。

由于canvas的图形变换是叠加进行的,所以又有两个API :save(),restore()。

这样状态这间就不会相互叠加啦。

当然tranform是 一个综合的矩阵函数。可以进行研究下。

canvas 的学习的更多相关文章

  1. canvas的学习

    canvas的学习 一. //获取画布 var mycanvasEle = document.getElementById("mycanvas");二. //内容 var ctx ...

  2. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  3. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  4. canvas基础学习(四)

    今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...

  5. canvas基础学习(二)

    一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...

  6. Canvas基础学习(一)——实现简单时钟显示

    HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...

  7. Canvas 绘图学习笔记2

    1 绘制文本 fillText(string,x,y,maxWidth)  //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本 设置字体样式: cont ...

  8. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

  9. canvas基础学习笔记

    canvas基本用法 1.什么是canvas(画布)  <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...

随机推荐

  1. android 几个小技巧

    1.如果打开模拟器,不同程序打开了不同的模拟器.可能是某个某个模拟器的target版本过低,修改一下4.2,应该都可以用了 2.找不到R.id.的错误,不妨删除menu文件夹下的xml文件 3.act ...

  2. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  3. Android(java)学习笔记75:匿名内部类的方式实现多线程程序

    二话不说,首先利用代码体现出来,给大家直观的感觉: package cn.itcast_11; /* 4 * 匿名内部类的格式: 5 * new 类名或者接口名() { 6 * 重写方法; 7 * } ...

  4. ArcGis:vs c#编程遇到问题The specified filename is invalid

    出现这个问题总归一点那就是你没有添加一个控件axLicenseControl这个控件导致报这个错误

  5. IE11下用forms身份验证的问题

    <authentication mode="Forms"> <forms name="weboa" loginUrl="login. ...

  6. python(1) - 列表和元组

    列表(list) 列表是经常用到的一种数据类型,是一组有序的数据集合,可以将各种数据有序的存放在列表中,并且可以对其进行增删改查,以及遍历. 列表就是为了使变量能够存储更多的信息,比如我想存储一张购物 ...

  7. 给jdk写注释系列之jdk1.6容器(3)-Iterator设计模式

    前面讲了两种List,一种基于数组实现的ArrayList,一种基于链表实现的LinkedList,这两种list是我们工作中最常用到的List容器.当然数组和链表也是两种常见的基本数据结构,其他基本 ...

  8. Adobe Edge Animate –EdgeCommons Log和全局变量设置功能

    Adobe Edge Animate –EdgeCommons Log和全局变量设置功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.Log功能 当 ...

  9. [未完成]关于CSS的总结

    CSS和html 数据和样式分离,在java中称为降低了耦合性. css和html相结合的第一种方式. 1,每一个html标签中都有一个style样式属性.该属性的值就是css代码. 2,使用styl ...

  10. 历经曲折的freescale

    从来没有想到自己在大学最信任的队友会突然放弃,,为了这个,,我可以说放弃了很多,,这几天可以我也不知道怎么办了,,我想不通的是为什么可以这样,为什么可以这么不负责任,,为什么这么自私,,这些我永远都不 ...