Web前端初学者的记录（第三天）

HTML5的新增元素
1.canvas元素
其主要针对于图像，图形，照片和代码等。
canvas路径-线条代码：
var 变量1 = document.getElementById("canvas的id名”）；
var 变量2 = 变量1.getContext(“2d”)；（这句是固定的，可以在画布中绘画2d图形，也只能是2d属性值）
变量2.moveTo（x,y）；开始绘画线条的坐标
变量2.lineTo（x,y)；结束绘画线条的坐标4
变量2.stroke（）；开始绘画

canvas路径-径向/圆代码：
var 变量1 =documen.getElementById("canvas的id名“）；
var 变量2 =变量1.getContext（”2d“）；
变量2.beginPath（）；开始一条路径
变量2.arc（x,y,圆的半径，开始坐标，结束坐标）；
变量2.stroke（）；

canvas文本-实心字
var 变量1=document.getElementById（”canvas的id名“）；
var 变量2=变量1.getContext（”2d“）；
变量2.font=”字体大小的像素 字体系列“；
变量2.fillText（”输入内容“，x,y);
变量2.stroke（）；

canvas文本-空心字
var 变量1=document.getElementById("canvas的id名”）；
var 变量2=变量1.getContext(“2d”);
变量2.stroketext（“输入内容”，x，y）；
变量2.stroke（）；

canvas渐变-线条
var 变量1 = document.getElementById（“canvas的id名”）；
var 变量2 = 变量1.getContext（“2d”）；
var 变量3 = 变量2.CreatelinearGradient（x，y，x1，y1）；
变量3.addcolorstop（0，“颜色”）；
变量3.addcolorstop（1，“颜色”）；
从0开始，往后渐变，变量3.addcolorstop（）可以是多个
上面三步是创建渐变；下面三步是填充渐变
变量2.fillstyle=变量3；填充的颜色
变量2.fillRect（x，y，长，宽）；其中x，y是距离画布的距离

canvas渐变-径向/圆
var 变量1=document.getElementById(“canvas的id名”);
var 变量2=变量1.getContext（“2d”）；
var 变量3=变量2.CreateRadialGradient（x，y，半径r，x1，y1，r1）；
变量3.addcolorstop（0，“颜色”）；
变量3.addcolorstop（1，“颜色”）；
上面是创建渐变，下面是填充渐变
变量2.fillstyle=变量3；
变量2.fillRect（x，y，长，宽）；其中x，y是距离画布的距离

canvas图像
var 变量1=document.getElementById("canvas的id名“）；
var 变量2=getContext（”2d“）；
var 变量3=documen.getElementById("img标签的id名”）；
变量3.onload = function（）{
变量2.drawImage（变量3，x，y）；
}
onload事件，它是图片载入后立即触发。