今天学习了下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. python基础之继承组合应用、对象序列化和反序列化，选课系统综合示例

    继承+组合应用示例 1 class Date: #定义时间类,包含姓名.年.月.日,用于返回生日 2 def __init__(self,name,year,mon,day): 3 self.name ...

  2. PHP.27-TP框架商城应用实例-后台4-使用Gii生成品牌表的代码

    Gii安装[GII适用于商城项目] 将Gii文件夹复到application 是,访问http://xx.com/index.php/gii Gii规则[Gii使用规则与建表规则密切相关] 1.建表字 ...

  3. HTML介绍和head标签-01

    主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织 ...

  4. 第四模块：网络编程进阶&数据库开发 口述

    进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 子进程死了之后 ,父进程关闭的时候要清理掉子进程的僵尸进程(收尸),孤儿进程是指父进程先死掉了的,交给init管理. join() 等待子进 ...

  5. Android 如何在xmL 里面动态设置padding

    如题,Android 如何在xmL 里面动态设置padding 有时候,你的布局加载完成之后,你findViewByid 找到控件,设置padding 会导致白条,布局闪动,那怎么办呢? 你是不是就想 ...

  6. Javacript实现倒计时

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

  7. 基类VS接口

    该篇引用 CLR via C# 中的13.11节. 应该设计基类还是接口,这个问题不能一概而论,下面提供一些指导性原则: 1. IS_A关系(指属于,例如汽车属于交通工具) vs CAN_DO关系(指 ...

  8. C# 访问修饰符internal的访问范围误区释疑

      一.前言                                               MSDN关于访问修饰符的访问级别解释: 访问修饰符是一些关键字,用于指定声明的成员或类型的可访 ...

  9. 我与0xc000007b奋斗的日子

    自从新换了一台笔记本,就开始重装各种软件,就在将要开始软工课设的重要的日子里,我默默地在运行客户端时出现了一个这样的错误: 鉴于本人很废柴,自然不可能去查内存,所以开始各种度娘必应和谷歌,哦!原来应该 ...

  10. PHP文件信息获取函数

    知识点: basename():获取文件名,传入第二个参数则只显示文件名,不显示后缀 dirname():获取文件路径 pathinfo():将文件信息存入一个数组,通过索引basename,dirn ...