HTML5初学笔记
今天学习了下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初学笔记的更多相关文章
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- C++ STL初学笔记
C++ STL初学笔记 更系统的版本见徐本柱的PPT set 在这儿:http://www.cnblogs.com/pdev/p/4035020.html #include <vector&g ...
- Spring 初学笔记
Spring 初学笔记: https://blog.csdn.net/weixin_35909255/article/category/7470388
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- laravel 5.6初学笔记
laravel 5.6初学笔记 http://note.youdao.com/noteshare?id=bf4b701b49dd035564e7145ba2d978b4 框架简介 laravel文档齐 ...
- csapp网络编程初学笔记
csapp网络编程初学笔记 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型,服务器管理某种资源,并且通过操作来为它的客户提供某种服务 客户端-服务器模型中的基本操作是transacti ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- Python初学笔记之字符串
一.字符串的定义 字符串是就一堆字符,可以使用""(双引号).''(单引号)来创建. 1 one_str = "定义字符串" 字符串内容中包含引号时,可以使用转 ...
随机推荐
- 使用泛型类简化ibatis系统架构
jdk1.5的推出为我们带来了枚举.泛型.foreach循环.同步工具包等等好东西.其中,泛型的使用为我们的代码开发提供了很大的简便,简化了我们的代码. 1.设计思路 1)GenericDao泛型类提 ...
- DNS域名解析服务（bind）
DNS(Domain Name System,域名系统): 用于管理和解析域名与IP地址对应关系的技术. 简单来说,就是能够接受用户输入的域名或IP地址,然后自动查找与之匹配(或者说具有映射关系)的I ...
- WCF入门一[WCF概述]
一.什么是WCF WCF是使用托管代码建立和运行面向服务(Service Oriented)应用程序的统一框架.它使得开发者能够建立一个跨平台的.安全.可信赖.事务性的解决方案,且能与已有系统兼容协作 ...
- Javascript Step by Step - 04
前言 本篇主要讨论jQuery的常用的若干操作.为了能直观的显示操作的结果,首先建立一个html文件,内容如下: <!DOCTYPE html> <html> <head ...
- 4 Vue.js 核心理念：数据驱动界面
1 style样式放在body里面 <style type="text/css"> .ui.segment.container { width:700px; } p { ...
- 1079: [SCOI2008]着色方案
链接 思路 首先是dp,如果直接用每个种颜色的剩余个数做状态的话,复杂度为5^15. 由于c<=5,所以用剩余数量的颜色的种类数做状态:f[a][b][c][d][e][last]表示剩余数量为 ...
- IIS Express mime type 列表。
C:\Users\Administrator\Documents\IISExpress\config\applicationhost.config -------------------------- ...
- web知识清单
声名随笔中的实例链接到另一个博客是我本人的另一个博客号 模块一:HTML 1.html是什么: hyperText markup language超文本标记语言 超文本:比文本更丰富的内容 所有的浏览 ...
- python爬取动态网页2，从JavaScript文件读取内容
import requests import json head = {"user-agent":"Mozilla/5.0 (Windows NT 6.1; WOW64) ...
- REST Web 服务（一）----REST 介绍
1. 什么是REST? REST 定义了一组体系架构原则,您可以根据这些原则设计以系统资源为中心的 Web 服务,包括使用不同语言编写的客户端如何通过 HTTP 处理和传输资源状态. 2. REST的 ...