今天学习了下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. 4x4矩阵键盘 扫描程序

    一:不排除第四位异常处理 uchar JuzhenkeyScan() { // P3=0xfe; // temp=P3; // while(temp!=0xfe) // { // temp=P3; / ...

  2. Android getLocationInWindow

    参考博客: http://blog.sina.com.cn/s/blog_44d19b500102vpve.html 这篇博客,我看了三遍,终于看懂了.恩,我就喜欢这样不放弃的自己. 1.getLoc ...

  3. Trident学习笔记（二）

    aggregator ------------------ 聚合动作:聚合操作可以是基于batch.stream.partiton [聚合方式-分区聚合] partitionAggregate 分区聚 ...

  4. 《Cracking the Coding Interview》——第11章：排序和搜索——题目1

    2014-03-21 20:35 题目:给定已升序排列的数组A和数组B,如果A有足够的额外空间容纳A和B,请讲B数组合入到A中. 解法:由后往前进行归并. 代码: // 11.1 Given two ...

  5. 【Matrix Factorization】林轩田机器学习技法

    在NNet这个系列中讲了Matrix Factorization感觉上怪怪的,但是听完第一小节课程就明白了. 林首先介绍了机器学习里面比较困难的一种问题:categorical features 这种 ...

  6. 【Invert Binary Tree】cpp

    题目: Invert Binary Tree Total Accepted: 20346 Total Submissions: 57084My Submissions Question Solutio ...

  7. python+selenium安装指导

    一.      安装python 1.Window 平台安装 Python 以下为在 Window 平台上安装 Python 的简单步骤: 打开 WEB 浏览器访问https://www.python ...

  8. Box布局管理

    创建wx.BoxSizer对象时可以指定布局方向: hbox = wx.BoxSizer(wx.HORIZONTAL) 设置为水平方向 hbox = wx.BoxSizer() 默认就是就是水平方向的 ...

  9. ROS 常用

    可以通过以下命令查看环境变量: export | grep ROS 安装 sudo apt-get install XXX 卸载 dpkg --list //Debian package sudo a ...

  10. python命名空间、作用域、闭包与传值传引用

    (以下内容,均基于python3) 最近在看python函数部分,讲到了python的作用域问题,然后又讲了Python的闭包问题. 在做作业的时候,我遇到了几个问题,下面先来看作业. 一. 作业1: ...