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. win7家庭版任务栏预览消失,只显文字终极解决法

    出现问题:win7家庭基础版,任务栏的预览窗口没有了,只有文字: Likethis:   工具/原料 services.msc 方法/步骤   网上的解决办法都试了,不管用,先把网上的方法列举出来如下 ...

  2. uva 699 The Falling Leaves dfs实现

    额,刘汝佳小白里面的配套题目. 题目求二叉树同垂直线上结点值的和. 可以用二叉树做,挺水的其实. 尝试使用dfs实现了:开一个大点的数组,根节点为最中间那点,然后读取时就可以进行和的计算了. 代码: ...

  3. Linux学习之路:变量值的删除、替代和替换

    一.删除 var为变量名, ${var#v*r}:从左到右匹配将:头部是“v”,尾部是“r”的最短的部分删除 ${var##v*r}:从左到右匹配将:头部是“v”,尾部是“r”的最长的部分删除 ${v ...

  4. u-boot移植为tiny6410步骤

    1. 修改顶层Makefile文件 2. 修改arch/arm/cpu/arm1176/s3c64xx/cpu_init.S 3. 修改arch/arm/cpu/arm1176/s3c64xx/Mak ...

  5. Oracle 版本查看及版本号说明

    http://blog.163.com/magicc_love/blog/static/185853662201210194592757/ select * from v$version; 或sele ...

  6. HTML+CSS3 纯代码实现转盘效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. ASP.NET 模板引擎 - NVelocity

    1,HTML的Form表单数据按Button提交数据以后,由 Action 指定的服务器端处理程序(.ashx)进行处理后 ,再响应的浏览器. 2,我们把 HTML的表单,写到 .ashx 一般处理程 ...

  8. Jersey(1.19.1) - Conditional GETs and Returning 304 (Not Modified) Responses

    Conditional GETs are a great way to reduce bandwidth, and potentially server-side performance, depen ...

  9. ios 一个app启动另一个app

    问题描述:需要从一个ios应用程序中,能启动另一个ios应用程序. 开发环境:xcode7.3.1 关键词:白名单(LSApplicationQueriesSchemes).注册自己的URL Demo ...

  10. C# 线程--第二线程方法

    概述 上一章节中和大家分享了线程的基础使用方法.在这一章中来和大家分享线程的一些常用方法. 主要包括:线程阻塞,线程终止,线程锁三方面. Thread 的 Sleep 和 Join 方法 Thread ...