今天学习了下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. aspx页面 按钮不响应回车键

    aspx页面在IE浏览器中,页面上的按钮默认都响应回车键,但有的时候我们的文本框可能需要响应回车键,这时我们就不想让按钮再响应回车键,这时我们只需要设置按钮的属性即可. 按钮分为两种,一种是<b ...

  2. GItHub 建立仓库克隆仓库

    Linux环境 建立本地仓库 mkdir git cd git git init 获取仓库地址 找到你的仓库,Clone or download,复制 克隆仓库到本地 git clone https: ...

  3. JavaScript 仿ios滑动选择器

    从git上找了一个,不过不是我想要的,更改了许多.到了我想要的效果: roller_selector_0_9.js 首先上js: "use strict"; /* * Author ...

  4. loj2100 「TJOI2015」线性代数

    先推公式,推出个这,然后因为是 \(0/1\) 矩阵,选一个有损耗,两个一组有加成,就想到了最大权闭合子图,(飞行计划问题) #include <iostream> #include &l ...

  5. myeclipse中项目名有红叉，但项目中文件没有报错的解决办法

    导入了别人的项目,各种jar包都放好后,path也都build好了,项目也能正常启动,但是就是项目名有红叉,这是为什么呢? 网上有人说Java build path中的jar包missing了,这是一 ...

  6. erlang节点互通查看

    在局域网内部,一般用短节点名来完成短节点的全联通.     全联通的前提之一是cookie要相同,cookie记录在一个文件中.     对于同一个物理机上的两个erlang节点,不用其他配置就可以全 ...

  7. 剑指Offer - 九度1511 - 从尾到头打印链表

    剑指Offer - 九度1511 - 从尾到头打印链表2013-11-29 21:08 题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例.每一组测试案例 ...

  8. 《Cracking the Coding Interview》——第16章：线程与锁——题目2

    2014-04-27 19:14 题目:如何测量上下文切换的时间? 解法:首先,上下文切换是什么,一搜就知道.对于这么一个极短的时间,要测量的话,可以通过放大N倍的方法.比如:有A和B两件事,并且经常 ...

  9. 《Cracking the Coding Interview》——第13章：C和C++——题目1

    2014-04-25 19:13 题目:用C++写一个读取文件倒数K行的方法. 解法:因为是要取倒数K行,所以我的思路是一行一行地读.过程中需要保存一个长度为K的链表,每次新读到一行都将表头节点移到表 ...

  10. USACO Section2.3 Longest Prefix 解题报告 【icedream61】

    prefix解题报告------------------------------------------------------------------------------------------ ...