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 = "定义字符串" 字符串内容中包含引号时,可以使用转 ...
随机推荐
- 大话CNN经典模型：VGGNet
2014年,牛津大学计算机视觉组(Visual Geometry Group)和Google DeepMind公司的研究员一起研发出了新的深度卷积神经网络:VGGNet,并取得了ILSVRC20 ...
- format内置函数
1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.14159 ...
- ListView.getChildCount() 详解
ListView.getCount() 返回的所包含的item总个数 ListView.getChildCount() (ViewGroup.getChildCount()) 返回的是现实层面上所包含 ...
- TerminateProcess
Remarks The TerminateProcess function is used to unconditionally cause a process to exit. The state ...
- 途牛banner自动轮播
<!DOCTYPE html> <!--申明文档类型:html--> <html lang="en"> ...
- ssm项目中ueditor富文本编辑器的使用
一.下载 https://ueditor.baidu.com/website/index.html 将ueditor放到项目中合适的位置 二 . 配置文件上传路径 在utf8-jsp/jsp/conf ...
- (转) Unreal的HLSL交叉编译-UEAPI
HLSL Cross Compiler This library compiles High Level Shading Language (HLSL) shader source code into ...
- (原)Unreal 渲染模块 渲染流程
@author:白袍小道 浏览分享随缘,评论不喷亦可. 扯淡部分: 在temp中,乱七八糟的说了下大致的UE过程.下面我们还是稍微别那么任性,一步步来吧. UE渲染模块牵扯到场景遍历. ...
- 重复造轮子系列--字符串处理（C语言）
这些字符代码是以前写的,源于很久很久以前的一个VC++项目,在当时的部门编程比赛里因为用了项目代码的xsplit函数,万万没想到,那个做了几年的项目里面居然有坑..xsplit函数居然不能split连 ...
- 第十四篇：JavaScript
本篇内容 简介 使用 DOM 一. 简介 JavaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. Ja ...