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. 【分布式计算】MapReduce的替代者-Parameter Server

    原文:http://blog.csdn.net/buptgshengod/article/details/46819051 首先还是要声明一下,这个文章是我在入职阿里云1个月以来,对于分布式计算的一点 ...

  2. Java_InvokeAll_又返回值_多个线程同时执行,取消超时线程

    package com.demo.test4; import java.util.ArrayList; import java.util.List; import java.util.concurre ...

  3. HBase-分布式安装

    HBase的安装很简单,也是分为单机伪分布式和分布式 先保证hadoop环境JDK环境,我的是2.2.0和1.6_45 1.确定hadoop正常 2.上传HBase并解压,我用的是和hadoop2.2 ...

  4. Android 高级UI设计笔记09:Android如何实现无限滚动列表

    ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...

  5. Android(java)学习笔记79:java中InetAddress类概述和使用

    要想让网络中的计算机能够互相通信,必须为每台计算机指定一个标识号,通过这个标识号来指定要接受数据的计算机和识别发送的计算机. 在TCP/IP协议中,这个标识号就是IP地址. 那么,我们如果获取和操作I ...

  6. Captcha生成及使用

    @Controller @RequestMapping("/PictureCheckCode") public class ServletController { @Request ...

  7. FZU 1686 神龙的难题 (DLX)

    神龙的难题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  8. Spring(3.2.3) - Beans(3): Bean 实例的创建方式

    创建一个 Bean 实例对象的方法通常有如下方式: 调用构造器创建 Bean 实例 调用静态工厂方法创建 Bean 实例 调用实例工厂方法创建 Bean 实例 使用构造器创建 Bean 实例 XML ...

  9. Unity3D 之暂停和继续的实现

    Time.timeScale 时间缩放 当timeScale传递时间1.0时和实时时间一样快.当timeScale传递时间0.5时比实时时间慢一半. 当timeScale传递时间为0时游戏基本上暂停了 ...

  10. Django学习--9 多对一关系模型

    保持前面的不变只是增加了一些 1.vim sdj/models.py class Blog(models.Model):        name = models.CharField(max_leng ...