![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5
大地飞鸿
这个作者很懒,什么都没留下…
展开
-
DOM-BOM-EVENT(2)
2.获取DOM元素的方法2.1.getElement系列documentElementById 通过id获取元素<div id="box"></div><script> var oDiv = document.getElementById("box)</script>documentElementsByClassName 通过类...原创 2019-12-16 16:24:22 · 83 阅读 · 0 评论 -
DOM-BOM-EVENT(1)
1.DOM简介DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。<html><head...原创 2019-12-16 16:18:32 · 111 阅读 · 0 评论 -
canvas基础入门系列教程(1)-canvas初体验
1.canvas初体验1.1.canvas 是什么canvas是html5新增的一个元素,配合宽度和高度属性定义出一个可绘图的区域,JavaScript可以访问该区域,通过一套完整的绘图函数来动态生成图形。canvas的应用包括绘制图形、绘制图表、制作动画效果、进行游戏开发等总结:本质上canvas是一个html5元素,需要通过JavaScript来操作才能实现各种功能,只是一个canvas...原创 2019-02-12 20:42:12 · 1082 阅读 · 0 评论 -
canvas基础入门系列教程(2)-绘制直线图形前置知识
2.绘制直线图形准备知识2.0.1.canvas的坐标系在默认情况下,canvas的左上角为原点,X坐标向右增长,Y坐标向下增长,但是,canvas的坐标并不是固定的,可以对坐标系统进行平移以及旋转2.2.路径初识路径中文解释为到达目的地必经的道路在canvas中我们使用stroke函数来画出moveTo和lineTo两点之间的线,调用了stroke函数以后,我们就可以看到一条直线,...原创 2019-02-12 20:44:20 · 152 阅读 · 0 评论 -
canvas基础入门系列教程(3)-绘制直线图形
2.1.绘制直线2.1.1.设置描边颜色通过strokeStyle属性来设置线条颜色 // 1. 获取到canvas对象 var oCanvas = document.getElementById('cvs') // 2. 获取到上下文环境 var ctx = oCanvas.getContext('2d') // 3. 开始绘制图形 // 3.1.把路径移动到画布中...原创 2019-02-12 20:45:51 · 403 阅读 · 0 评论 -
canvas基础入门系列教程(4)-绘制矩形
2.2.绘制矩形前面章节中我们使用三条线来画一个三角形,同理,也可以用四条线来画出一个矩形,但是这样做代码量会更多,并不推荐这样做,在canvas中提供了相应的方法来快速画出矩形。2.2.1.strokeRect方法strockeRect是获取到的2d环境对象上的方法,可以非常方便的画出一个矩形//语法ctx.strokeRect(x, y, width, height)stroke...原创 2019-02-12 20:46:58 · 392 阅读 · 0 评论 -
canvas基础入门系列教程(5)-绘制曲线图形
3.绘制曲线图形在canvas中曲线图形通常分为两种,曲线和弧线,弧线就是圆周上的一部分,曲线上每一点都有相同的曲率,曲线则不一定,曲线的范围更大,曲线包含率弧线3.1.使用点来画曲线&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="原创 2019-02-12 20:48:00 · 2276 阅读 · 0 评论 -
canvas基础入门系列教程(6)-绘制图片
4.绘制图片在canvas中使用到的图片并不是通过js去画的,如果每张图片都是用js去画,那么会相当麻烦,例如:游戏开发中的地图、背景、人物等,这些素材如果直接用js去画,先不考虑难度问题,就是画这些内容工作量就非常大了,因此,canvas提供了方法可以直接讲图片加载到canvas中,这样就方便多了4.1.绘制图片体验在canvas中绘制图片,实际上说的是把图片加载到canvas中,我们需要...原创 2019-02-12 20:49:35 · 285 阅读 · 0 评论 -
canvas基础入门系列教程(7)-绘制文本
5.绘制文本5.1.strokeText方法通过strokeText方法可以绘制描边的文本// 语法ctx.strokeText(text, x, y [, maxWidth]);参数说明text 使用当前 font,textAlign,textBaseline和direction 的值对文本进行渲染。x 文本起始点的 x 轴坐标。y 文本起始点的 y 轴坐标。maxWidth...原创 2019-02-12 20:51:10 · 172 阅读 · 0 评论 -
canvas游戏开发系列(1):基础知识
canvas基础知识canvas是什么? canvas是html5的一个元素,可以说他的功能是html元素中最强大的一个。举个栗子:第一步:在页面中引入canvas标签,并且设置好宽高背景等样式<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <s原创 2017-01-14 12:57:14 · 444 阅读 · 0 评论