头部标签
常用的头部标签
标题标签
<title></title>
元信息标签
<meta />
<!-- name: 可以为keywords、description、author -->
<meta name="名称" content="值" />
<!-- 设置服务器发送给浏览器的http头部信息,即文件类型信息 -->
<meta http-equiv="名称" content="值" />
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<!-- html5中的简化写法 -->
<meta charset="utf-8" />
<!-- 页面经过特定的时间后跳转至目标页面 时间:以秒为单位,url地址 -->
<meta http-equiv="refresh" content="10; url = 重新跳转的地址" />
- 单标签,可以重复出现
- 定义网页关键字(keywords)、作者姓名(author)、内容描述(description)、网页刷新时间
canvas 标签
在没有设置样式的前提下,canvas元素默认是完全透明的(肉眼看不见)
var canvasEle = document.querySelector('canvas'),
context = canvasEle.getContext('2d')
context.beginPath()
context.moveTo(100, 100)
context.lineTo(100, 200)
context.lineTo(200, 200)
// context.closePath()
context.strokeStyle = 'red'
context.lineWidth = 10
context.fillStyle = 'blue'
context.fill()
context.stroke()
属性
display: inline (行内元素 和img 标签类似,可以设置宽高)
方法
getContext(args) (获取画布上下文)
var context = canvasEle.getContext('2d')
context.beginPath() // 开始选区
context.moveTo(100, 100) // 绘制起点
context.lineTo(100, 200) // 与上一个点之间进行连接成线
context.lineTo(200, 200)
context.closePath() // 结束选区
context.strokeStyle = 'red' // 设置边框样式
context.lineWidth = 10 // 设置边框宽度
context.lineCap = 'round' // 定义设置线段两端的样式(butt 方形 默认值, round 圆形 and square 方形)
context.fillStyle = 'blue' // 设置填充样式
context.fill() // 执行填充
context.stroke() // 执行描边
context.fillStyle = 'skyblue' // 填充样式
context.fillRect(100, 100, 100, 200) // 填充矩形(起点(x, y),矩形宽高)
画图
画图片
var oImg = new Image()
oImg.onload = () => {
// context.drawImage(oImg, 0, 0, 90, 83, 100, 100, 150, 150)
context.drawImage(oImg, 180, 0, 90, 83, 100, 300, 50, 50)
}
oImg.src = './images/ybi01.jpg'