1. 创建canvas画布
<canvas id="myCanvas" width="800" height="800" ></canvas>
注意:(1)width、height,这两个属性定义了canvas元素宽和高,从而相应的定义了2D渲染上下文的尺寸。
   (2)2D渲染上下文的尺寸默认值:宽300像素、高150像素。
2. 坐标
左上角为原点(0,0)
右移:x坐标增加
下移:y坐标增加
3. 2D渲染上下文(真正绘制图形的地方)

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');   // 获取canvas的ID
    var context =canvas.getContext("2d");
</script>

第二部分:矩形
1.绘制矩形
方法:context.fillRect(x,y,width,height);
2.绘制描边矩形
方法:strokeRect(x,y,width,height)
实例:

<script>
    function draw1(id){
        var canvas = document.getElementById(id);  
        var context =canvas.getContext("2d");
        context.fillRect(0,0,100,100);  // 绘制一个矩形,默认颜色为黑色
        context.strokeRect(120, 0, 100, 100);     // 绘制描边矩形
    }draw1('myCanvas');
</script>

第三部分:线条
线条(路径)绘制步骤:
1)beginPath()      准备
2)moveTo()      绘制路径的原点坐标(x,y)
3) lineTo()         设置线条的终点坐标(x,y)
4) closePath()      完成路径的绘制
5)stroke()       绘制轮廓,显示路径 
实例:

<script>
    function draw1(id){
        var canvas = document.getElementById(id);  
        var context =canvas.getContext("2d");
        context.beginPath();
        context.moveTo(40,40);
        context.lineTo(140,40);
        context.closePath();
        context.stroke();
    }draw1('myCanvas');
</script> 

第四部分:圆形
canvas 通过绘制圆弧并将其首尾相连,达到绘制圆形的目的。
创建圆弧的方法:context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
对应参数:
1)圆弧原点的(x,y)坐标值,也就是例子中的圆心
2)圆弧半径
3)开始角度
4)结束角度
5)布尔值(顺时针false,逆时针true) 
注意: canvas中的圆是以弧度而不是角度为单位的。
360度(一个完整的圆)是2π(PI的2倍)弧度
实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);  
        var context =canvas.getContext("2d");
        context.beginPath();
        context.arc(230,90,50,0,Math.PI*2,false); // 绘制圆形
        context.closePath();
        context.fill(); // 填充路径
    }draw1('myCanvas');
</script>

第五部分:样式
1. fillStyle :给矩形填充颜色
2. strokeStyle:给描边和线条添加颜色
3. lineWidth:修改线宽(线宽默认为1),这个属性也会影响图形

通过设置2D渲染上下文的fillStyle属性,就能够修改形状和路径的填充颜色,如下,绘制一个红色的正方形

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);  
        var context =canvas.getContext("2d");
        context.fillStyle = "red";    // 给图形填充红色
        context.fillRect(0,0,50,50);     // 一个红色的正方形
        context.fillRect(70,70,80,80);    // 又一个红色正方形
 
        context.fillStyle = "blue";      // 给图形填充蓝色
        context.fillRect(70,70,80,80);     // 一个蓝色正方形
 
        context.strokeStyle = "yellow";      // 给图形填充黄色描边
        context.strokeRect(170,170,100,100);    // 一个黄色描边的正方形
 
        context.strokeStyle = "blue";   // 绘制蓝色线条
        context.beginPath();     // 绘制线条开始
        context.moveTo(290,290);
        context.lineTo(350,350);
        context.closePath();
        context.stroke();    // 绘制线条结束
 
        context.lineWidth = 5;   // 加粗线条
        context.strokeStyle = "blue";     // 绘制蓝色线条
        context.beginPath();
        context.moveTo(320,340);
        context.lineTo(370,390);
        context.closePath();
        context.stroke();     // 加粗的线条绘制完成
        context.strokeRect(380,380,50,50)     // 受影响的图形,描边已加粗
    }draw1('myCanvas');
</script>

 

第六部分:绘制文本
canvas绘制文本:
(1) canvas中的文本以图片形式绘制,不可用普通文字一样用鼠标指针选取
(2) 文字绘制后不可编辑,除非先擦除文字,重新绘制
注:通常是使用html来处理文本,使用canvas来处理像素和图形
1.绘制文本:fillText 
参数:
准备绘制的文本,文本原点(左下角)的(x,y)坐标值
默认:10px sans-serif
2.修改文字属性:font
3.描边文本:strokeText

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);  
        var context =canvas.getContext("2d");
        var text = "hello world!";
        context.font="30px serif" // 把文本大小设置为30px
        context.fillText(text,40,40); // 绘制文本
        context.strokeText(text,40,80); // 描边文笔塔你
    }draw1('myCanvas');
</script>

html 5 canvas画布整理的更多相关文章

  1. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  3. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

  4. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  5. 自学HTML5第四节(canvas画布详解)

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  6. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  7. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  8. Canvas 画布组件(官网翻译)

    Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...

  9. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

随机推荐

  1. 编译器--__attribute__ ((packed))

    1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...

  2. C# 动态调用DLL库

    最近经常用到C#动态调用类库,简单的做下记录方便以后查询. 使用下面的几行代码就可以简单实现DLL类库的调用了 using System.Reflection; // 引入该命名空间 // 获取roc ...

  3. 惊闻Java要收费之后

    今天看到朋友圈里的文章 <Oracle终于要向Java的非付费用户开枪了>,被这个标题吓了一跳,还以为Java要全面收费了.又被标题党骗了. 但是仔细想想,以Oracle公司的尿性,没准哪 ...

  4. C#水晶报表,窗体不显示,闪退

    一.问题说明 由于VS2008以后水晶报表不在集成,要用的话需要单独下载. 这里注意如果是用在C#窗体程序里的话一定要下载exe文件,安装msi文件的话VS工具栏里找不到水晶报表控件的.如果你的是64 ...

  5. 多个supplemental logging的说明与删除

    有时候我们做ogg的时候,查看info trandata schema.table 无法查看到对应的supplement log信息, 但是我们查看table script的时候可以看到supplem ...

  6. 从零起步搭建Wordpress个人博客——Windows 平台篇(上)

    本文以 Windows Server R2 64bit 标准版 为基础,其他windows版本可能会略有不同. 参考资料: https://codex.wordpress.org/Installing ...

  7. Centos7中安装Mysql及配置

    CentOS 7 安装 MySQL 首先检查 MySQL 是否已安装 yum list installed | grep mysql 如果有的话 就全部卸载 yum -y remove +数据库名称 ...

  8. mysql的查询、子查询及连接查询

    >>>>>>>>>> 一.mysql查询的五种子句         where(条件查询).having(筛选).group by(分组). ...

  9. Keras官方Example里Mnist-cnn的调试运行

    问题:老板让测试运行Keras官网里的Mnist-cnn.py,结果从下载数据就是一路坑-- 当前环境:Ubuntu12.04.python2.7.Keras 1.1.1(不知道这个版本号对不对,在启 ...

  10. Angular内置指令(二)

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...