canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。

canvas的限制:

  • canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形。
  • 在使用canvas时,需要考虑用户的浏览器和使用环境。
  • canvas目前只是一张二维画布,要想实现三维效果,需要借助第三方类库,如three.js或者Papervision3D等。

使用canvas,只需要在HTML5中添加canvas元素即可:

 <canvas id="myCanvas" width="200" height="100"></canvas>

通过id获取canvas元素:

 var canvas = document.createElementById("myCanvas");

获取CanvasRenderingContext2D对象(绘图对象):

 var context = canvas.getContext("2d");

设置线条宽度:

 context.lineWidth = 10;

设置线条颜色:

 context.strokeStyle = "red";
 context.strokeStyle = "#ff0000";
 context.strokeStyle = "rgb(0,0,0)";

设置线帽样式:

 context.lineCap = 'butt';
 context.lineCap = 'round';
 context.lineCap = 'square';

设置填充颜色:

 context.fillStyle = "red";
 context.fillStyle = "#ff0000";
 context.fillStyle = "rgb(0,0,0)";

创建一个新的路径:

 context.beginPath();

设置路径的起始点:

context.moveTo(x, y);

移动画笔至某坐标(产生路径):

context.lineTo(x, y);

绘制路径:

context.stroke();

绘制矩形:

context.strokeRect(x, y, w, h);
// x,y 左上顶点坐标
// w 矩形宽度
// h 矩形长度
context.rect(x, y, w, h); //功能与context.strokeRect相同

绘制实心矩形:

 context.fillRect(x, y, w, h);

画圆:

 context.arc(x, y, r, b, e, bool);
 // x,y 圆心坐标
 // r 半径
 // b 起始弧度
 // e 终止弧度
 // bool 是否逆时针绘制

注意:第4、5个参数传入的是圆弧的弧度,如果要画30度的角,则需将其转化为弧度:30*Math.PI/180。

画圆弧:

context.arcTo(P1x, P1y, p2x, p2y, r)
// 当前点:P
// 所绘制的圆弧与线段PP1、PP2相切
// 圆弧半径为: r

擦除canvas:

 canvas.clearRect(x, y, w, h);

canvas学习笔记(一)的更多相关文章

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

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

  2. canvas学习笔记,实用知识点总结(上)

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  3. canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  4. canvas学习笔记(中篇) -- canvas入门教程-- 颜色/透明度/渐变色/线宽/线条样式/虚线/文本/阴影/图片/像素处理

    [中篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  5. canvas学习笔记(上篇)-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. canvas学习笔记一

    为了研究pixi库,就顺带从头到位学习下canvas吧 判断支持力度 var webgl = (function() { try { var canvas = document.createEleme ...

  7. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  8. canvas学习笔记(一)-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

  9. 【canvas学习笔记一】基本认识

    <canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...

  10. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

随机推荐

  1. Bloom filter 2

    1 Bloom filter 计算方法 如需要判断一个元素是不是在一个集合中,我们通常做法是把所有元素保存下来,然后通过比较知道它是不是在集合内,链表.树都是基于这种思路,当集合内元素个数的变大,我们 ...

  2. unix下各种查看“变量”的命令比较

    子程序只会继承父程序的环境变量,而不继承其自定义变量. env 查看所有环境变量 set 查看所有变量,包括环境变量和自定义变量 set 还可以给程序位置参数赋值: set 1 2 3 将1赋值给$1 ...

  3. machine learning 之 Neural Network 2

    整理自Andrew Ng的machine learning 课程 week5. 目录: Neural network and classification Cost function Backprop ...

  4. form表单提交转为可被 getModel(PROJECT.class ,null);接收

    var form = new mini.Form("#editForm"+id); form.validate();if (!form.isValid()) { alert('信息 ...

  5. JMS(Java平台上的专业技术规范)

    JMS(Java平台上的专业技术规范) 编辑   jms即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应 ...

  6. Javac的实现过程

    主要介绍Javac的实现过程及原理. 首先弄明白什么是Javac? Javac是一种编译器,将一种语言转换为另一种语言规范.编译器的作用就是将符合java语言规范的源代码转化为JVM虚拟机能够识别的字 ...

  7. Selenium高级篇Web自动化测试框架

    现在常用的是对象模型PO(Page Object), 从过去要知道具体的定位,返回使用现在只需要知道所在页面的名称即可访问页面对象即可看到该页面的元素 PageObject实现了对页面对象及方法的抽离 ...

  8. NewLife.Net——开始网络编程

    网络编程的重要性就不说了,先上源码:https://github.com/nnhy/NewLife.Net.Tests 一个服务端,就是监听一些端口,接收客户端连接和数据,进行处理,然后响应. /// ...

  9. 关于Apple开发者的D-U-N-S Number

    企业开发者需要这个信息,中文译名叫邓白氏编码,很多攻略给的那个申请地址已经失效,这个组织官方也有地址可以提交申请资料,不过得注册,苹果目前可用的地址是:https://developer.apple. ...

  10. linux小实验-考勤模拟程序

    任务: 设计一个考勤模拟程序,实现如下功能选择界面,要求使用函数 1.上班签到 2.下班签出 3.缺勤信息查阅 4.退出 考勤程序运行后,提示用户输入上述功能选择,并验证用户输入的用户名和密码:用户信 ...