今天学习了下HTML5的基本知识，用画笔在画布上画了几个东西，效果如图，相关代码如下，注意点总结在末尾；

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<canvas id="can1" width="500px"  height="500px"  style="border:1px solid red">

</canvas>

<script type="text/javascript">

    //准备工作

    //得到画布

    var  canvas1=document.getElementById("can1");

    //得到上下文引用对象，你可以理解成画笔

    var cxt=canvas1.getContext("2d");

    //画出一个直线

    cxt.moveTo(30,10);//设置点的位置

    cxt.lineTo(30,90);//设置第二个点的位置

    cxt.stroke();//将这两个点连起来，画出直线

    /**

    *画出一个填充的三角形

    */

    cxt.beginPath();//开始新的起点

    cxt.moveTo(50,10);//设置点的位置

    cxt.lineTo(50,90);//设置第二个点的位置

    cxt.lineTo(80,90);//设置第三个点的位置

    cxt.closePath();//结束一个画的动作，闭合这三个点

    //cxt.fill();//实体填充

    cxt.stroke();//空心填充

    //stroke划线，fill就是填充

    //画出一个矩形,四个点的含义，前两个是左上角的点，后面两个分别是宽和高

    //strokeRect(x,y,width,height)

    cxt.strokeRect(100,10,30,80);

    //画出一个填充的矩形，其颜色是蓝色

    cxt.fillStyle="#00ffff";

    cxt.fillRect(150,10,30,80);

    //画出一个圆形arc

    //六个参数arc(x,y,redius,startAngle,endAngle,counterclockwise)

    cxt.beginPath();//开始新的起点

    //true代表逆时针，false代表顺时针，其实这个无所谓的

    cxt.arc(220,30,20,0,360,false);

    cxt.closePath();//结束一个画的动作

    cxt.stroke();

    //画出一个填充的圆形arc

    //六个参数arc(x,y,redius,startAngle,endAngle,counterclockwise)

    cxt.fillStyle="#ff0000";//红色

    cxt.beginPath();//开始新的起点

    //true代表逆时针，false代表顺时针，其实这个无所谓的

    cxt.arc(280,30,20,0,360,false);

    cxt.closePath();//结束一个画的动作

    cxt.fill();

    //画一个图片出来，步骤如下

    //1、创建image对象

    var img1=new Image();

    //2、指定是哪个图片

    img1.src="1.png";

    //3、加载完毕后，再绘制图片

    img1.onload=function(){

        cxt.drawImage(img1,30,100,100,90);

    }

    //在画布上写字
    var text="牛魔王";
    cxt.fillStyle="#0000ff";
    cxt.font="30px  华文新魏";//如果输入的字体找不到，那么默认为宋体
    cxt.fillText(text,150,150);

</script>

</body>

</html>

先定义了一个画布，在script中获取画笔，用画笔画你想画的东西

注意点：

1、除了线和矩形不需要beginPath（），和closePath（）其他都需要，不然会出一些莫名奇妙的问题

2、stroke划线，fill就是填充

3、颜色的设置要在beginPath（）之前，否则不起作用；

4、.画圆形的时候逆时针和顺时针有时候不太好用，计算设置了0度到360.顺时针和逆时针却不一样，可以正难则反试试；

5、canvas是画布，getcontext（）是画笔；

end.

HTML5初学笔记的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. C++ STL初学笔记

    C++  STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...

  3. Spring 初学笔记

    Spring 初学笔记: https://blog.csdn.net/weixin_35909255/article/category/7470388

  4. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. laravel 5.6初学笔记

    laravel 5.6初学笔记 http://note.youdao.com/noteshare?id=bf4b701b49dd035564e7145ba2d978b4 框架简介 laravel文档齐 ...

  6. csapp网络编程初学笔记

    csapp网络编程初学笔记 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型,服务器管理某种资源,并且通过操作来为它的客户提供某种服务 客户端-服务器模型中的基本操作是transacti ...

  7. HTML5基础——笔记

    HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...

  8. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  9. Python初学笔记之字符串

    一.字符串的定义 字符串是就一堆字符,可以使用""(双引号).''(单引号)来创建. 1 one_str = "定义字符串" 字符串内容中包含引号时,可以使用转 ...

随机推荐

  1. 代码review的流程

    以前我们一直都是如果要进行代码review的时候,要不我们就直接用idea来进行查看,根据不同的来查看 但是我们都是看代码的不同来进行来实现的,其实我们不需要这样,我们可以使用工具Phabricato ...

  2. Android面试收集录7 AsyncTask详解

    1.Android中的线程 在操作系统中,线程是操作系统调度的最小单元,同时线程又是一种受限的系统资源,即线程不可能无限制地产生, 并且 **线程的创建和销毁都会有相应的开销.**当系统中存在大量的线 ...

  3. PHP.29-TP框架商城应用实例-后台6-商品会员添加-价格、级别

    首先把需求分析搞清楚 主要实现两个功能 1.会员管理,设置成为会员的要求 2.添加商品时,可设置会员优惠价格 具体实现 1.建表[会员级别限定表p39_member_level{Id,级别名称,积分下 ...

  4. 16，Flask-Migrate

    终于到了Flask-Migrate,之前在学习Flask-SQLAlchemy的时候,Flask支持 makemigration / migrate 吗? 答案在这里该诉你,如果你同时拥有两个三方组件 ...

  5. adnroid 打包问题 :compileReleaseJavaWithJavac

    今天打包的时候,由于着急.改了些本地的变化就assembleRelease. 然后就报错: compileReleaseJavaWithJavac 后来网上乱找,.... 之后我想到先跑一下,果然是因 ...

  6. spark发现新词

    package com.icklick.spark.wordSegment import org.apache.log4j.{ Level, Logger } import org.apache.sp ...

  7. Android如何实现毛玻璃效果之Android高级模糊技术

    自从iOS系统引入了Blur效果,也就是所谓的毛玻璃.模糊化效果,磨砂效果,各大系统就开始竞相模仿,这是怎样的一个效果呢,我们先来看一下,如下面的图片: 效果我们知道了,如何在Android中实现呢, ...

  8. 底部菜单栏之Fragment的详细介绍和使用方法

    详情请看:http://blog.csdn.net/loongggdroid/article/details/9366413

  9. APP测试用例要考虑的一些方面

    安装与卸载:●应用是否可以在IOS不同系统版本或android不同系统版本上安装(有的系统版本过低,应用不能适配)●软件安装后是否可以正常运行,安装后的文件夹及文件是否可以写到指定的目录里.●安装过程 ...

  10. [0] OpenCV_Notes - 琐碎

    CV_8UC1,CV_8UC2,CV_8UC3等意思 一般的图像文件格式使用的是 Unsigned 8bits,CvMat矩阵对应的参数类型就是CV_8UC1,CV_8UC2,CV_8UC3.最后的C ...