一、画布（canvas）的使用
1. 绘图：画布（canvas）的使用
2. 画布：页面中用于绘制图形的特殊区域，开发人员可以在这个区域内进行自定义图形的绘制
（1）创建画布的方法：
<canvas id="画布的标识" width="宽度" height="高度">
您的浏览器不支持画布
</canvas>
（2）获取画布：getElementById(‘canvas的id’)
（3）获取画笔：使用context对象，语法格式是：
let context = canvas.getContext('2d') //context代表的是一支笔
（4）绘制直线：直线的起始点、直线的终点、描边(设置线条的颜色)
<script>
let canvas = document.getElementById('canvas') //获取画布
let context = canvas.getContext('2d') //获取画布
context.moveTo(100,100) //确定起始点为(100,100) ，即将画笔移动到该点上。moveTo方法用来确定起始点
context.lineTo(200,200) //确定线条的另一个端点，即终点(200,200)。
context.stroke() //进行描边，让线条可见(默认的画笔颜色为黑色)
</script>
（5）设置描边的颜色：context.strokeStyle = ‘red’ //设置描边的颜色。颜色值可以是十六进制、颜色名
（6）设置端点的形状：使用 lineCap=“属性值” 来设置端点的形状，取值有三种
- butt：默认值，无端点，显示的是线条的方形边缘
- round：圆形端点
- square：方形端点
（7）路径的重置：beginPath()
（8）闭合路径：closePath()
（9）设置线宽：lineWidth = ‘数值’
（10）填充路径：fill()
（11）设置填充颜色：fillStyle = ‘颜色’
（12）画弧线或画圆：arc(x,y,r,开始角,结束角,方向)
- x,y：确定圆心的坐标
- r：表示圆形或弧线的半径
- 开始角：表示弧点的起始位置，通常用Math.PI表示(可以理解为180度)
- 结束角：表示弧点的结束位置
- 方向：表示绘图的方向（逆时针、顺时针）。默认值为true，表示逆时针，默认值为false，表示顺时针
<body>
<canvas id="huabu" width="1000" height="1000">
您的浏览器不支持画布
</canvas>
<script>
//开启画布专属提示
/** @type {HTMLCanvasElement} */
let bu = document.getElementById('huabu')//获取画布
let pen = huabu.getContext('2d')//获取画笔
pen.lineWidth = 10
pen.lineCap = 'round'
pen.moveTo(100,100)//确定起始点为（100，100）点，将画笔移动到（100，100）点。moveTo方法用来确定起始点
pen.lineTo(100,200)//确定线条的另一个端点为（200，200）点，即终点。lineTo方法用来确定终点
pen.lineTo(200,200)
pen.lineTo(100,100)
pen.strokeStyle = 'green'
pen.fillStyle= "blue";
pen.stroke()
pen.closePath()
pen.strokeStyle = 'red'//设置描边的颜色值，可以是16进制，也可以是普通的颜色名字
pen.fillStyle = "blue"
pen.fill()
pen.stroke()//进行描边，让线条可见（默认的画笔颜色为黑色）
pen.arc(150, 150, 100, 0, Math.PI*2, false);
pen.fill()
pen.arc(400,100,30,0,Math.PI*2,false)
pen.lineWidth = '3'
pen.stroke()
</script>
</body>
（13）画矩形：rect(x,y,width,height)，x和y表示矩形左上角的坐标
（14）填充矩形：fillRect(x,y,width,height)，x和y表示矩形左上角的坐标
（15）绘制文本：context.fillText(text,x,y)，text表示要绘制的文本，x和y表示坐标位置
（16）平移当前的坐标系：context.translate(x,y)
（17）设置坐标系的旋转角度：context.rotate(deg)
<body>
<canvas id="canvas" width="1000" height="1000">
您的浏览器不支持画布
</canvas>
<script>
let ctx = document.getElementById
('canvas').getContext('2d')
//矩形的框
ctx.translate(-100, 0)//平移
ctx.rotate(0.02*Math.PI)
ctx.rect(120, 120, 180, 100)
ctx.strokeStyle = 'red'
ctx.stroke()
//矩形的块
ctx.fillStyle = 'green'
//ctx.rotate(10)
ctx.fillRect(230, 230, 180, 100)
//绘制文本
//ctx.rotate(10)
ctx.fillStyle = 'skyBlue'
ctx.fillText('白鹿原', 300, 100)
</script>
</body>
（18）绘制图像：fillImage(image,x,y)
练习：笑脸
<body>
<canvas id="xiaolian" width="1000" height="1000">
笑脸
</canvas>
<script>
let huabu = document.getElementById('xiaolian')
let pen = xiaolian.getContext('2d')
//笑脸
pen.beginPath()
pen.arc(100, 100, 80, 0, Math.PI * 2, false)
pen.closePath()
pen.fillStyle = 'green'
pen.fill()
//左眼
pen.beginPath()
pen.arc(70, 80, 20, 0, Math.PI, true)
// pen.closePath()
pen.lineWidth = 2
pen.strokeStyle = 'white'
pen.stroke()
//左眼珠
pen.beginPath()
pen.arc(70,80,10,0,Math.PI*2)
pen.fillStyle = 'black'
pen.fill()
//右眼
pen.beginPath()
pen.arc(130,80,20,0,Math.PI,true)
pen.lineWidth = 2
pen.strokeStyle ='white'
pen.stroke()
//右眼珠
pen.beginPath()
pen.arc(130,80,10,0,Math.PI*2)
pen.fillStyle = 'black'
pen.fill()
//嘴巴
pen.beginPath()
pen.arc(100,110,50,Math.PI/6,Math.PI/1.2,false)
pen.lineWidth = 2
pen.strokeStyle ='white'
pen.stroke()
</script>
</body>
练习：绘制验证码
（1）随机颜色：随机生成 r、g、b 值
a、定义生成随机数函数：
function rn(min,max){ //随机数函数
return parseInt(Math.random()*(max-min)+min);
}
b、随机生成 r、g、b颜色值
function rc(min,max){ //随机颜色的函数
var r=rn(min,max);
var g=rn(min,max);
var b=rn(min,max);
return `rgb(${r},${g},${b})`;
}
c、设置绘制验证码的区域：矩形、浅色背景
var w=120;
var h=40;
var ctx=document.getElementById('canvas').getContext("2d");
ctx.fillStyle=rc(180,230);
ctx.fillRect(0,0,w,h); //在0,0的位置填充一个120*40的矩形
（2）随机文本：随机生成下标，通过下标在字符串或数组中拿到对应的字符
var pool="ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
for(var i=0;i<4;i++){ //生成4个随机的字符
var c=pool[rn(0,pool.length)];//随机的字符
var fs=rn(18,40);//字体的大小
var deg=rn(-30,30);//字体的旋转角度
ctx.font=fs+'px Simhei'; //设置字号、字体
ctx.textBaseline="top"; //绘制文本的基线：以上边线为界
ctx.fillStyle=rc(80,150); //设置填充颜色
ctx.save(); //保存前面对画笔的设置
ctx.translate(30*i+15,15); //平移坐标系
ctx.rotate(deg*Math.PI/180); //设置偏转角度
ctx.fillText(c,-15+5,-15); //绘制文本
ctx.restore(); //清除前面画笔的设置，画笔恢复到初始状态
}
（3）随机画线条（干扰线）：端点坐标随机生成、线条的角度随机设置
for(var i=0;i<5;i++){
ctx.beginPath(); //重置路径
ctx.moveTo(rn(0,w),rn(0,h)); //设置线条的起点
ctx.lineTo(rn(0,w),rn(0,h)); //设置线条的终点
ctx.strokeStyle=rc(180,230); //设置线条的随机颜色
ctx.closePath(); //关闭路径
ctx.stroke(); //描边
}
（4）随机画点：圆心坐标随机
for(var i=0;i<40;i++){
ctx.beginPath();
ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI); //随机确定圆心坐标
ctx.closePath();
ctx.fillStyle=rc(150,200); //随机的填充色
ctx.fill(); //进行填充
}
练习：在文本框中输入验证码，判断是否正确。设置文本框的样式和验证码在一行中
<head>
<script src="../12-3周作业/movie/movie_client/js/jquery-3.4.1.js"></script>
</head>
<style>
input{
height: 40px;
margin-top: 40px;
}
canvas{
vertical-align: middle;
margin-bottom: -110px;
}
button{
margin-left: 200px;
}
</style>
<body>
<div>
请输入验证码：<input type="text" id="input">
<canvas id="canvas">
您的浏览器不支持画布
</canvas>
<br><br>
<button type="button" id="btn">验证</button>
</div>
<script>
$(function(){
var arr = [];
newchar(arr);
$('canvas').on('click',function(){
newchar(arr);
})
$("#btn").on('click',function(){
var val = $("#input").val().toLowerCase();
var num = arr.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
alert('提交成功！');
$("#input").val('');
}else{
alert('验证码错误！请重新输入！');
$("#input").val('');
}
})
})
// 1.随机数
function random(min,max){
return parseInt(Math.random()*(max-min)+min)
}
// 2.随机颜色
function color(min,max){
var r = random(min,max)
var g = random(min,max)
var b = random(min,max)
return `rgb(${r},${g},${b})`
}
// 3.绘制验证码区域
// 3.1设置宽高
var width = 120
var height = 40
// 3.2获取画笔
let context = document.getElementById('canvas').getContext('2d')
// 3.3设置填充颜色,浅色
context.fillStyle = color(180,230)
// 3.4设置区域形状大小
context.fillRect(0,0,width,height)
// 4.随机字符串
function newchar(arr){
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
for (let i = 0; i < 4; i++) { //生成4个随机的字符
var char = str[random(0,str.length)] //随机的字符
var font_size = random(18,40) //字体大小
var deg = random(-30,30) //旋转角度
context.font = font_size + 'px Simhei' //设置字号、字体
context.textBaseline = 'top' //设置文本基线：以上边框为界
context.fillStyle = color(80,150) //设置填充颜色
context.save() //保存前面对画笔的设置
context.translate(30*i+15,15) //平移坐标系
context.rotate(deg*Math.PI/180) //绘制偏转角度
context.fillText(char,-15+5,-15) //绘制文本
context.restore() //清除前面画笔的设置，画笔恢复到初始状态
arr[i] = char.toLowerCase()
}
}
// 5.随机线条
for (let i = 0; i < 5; i++) {
context.beginPath() //重置路径
context.moveTo(random(0,width),random(0,height)) //设置线条的起点
context.lineTo(random(0,width),random(0,height)) //设置线条的终点
context.strokeStyle = color(180,230) //设置线条的随机颜色
context.closePath() //关闭路径
context.stroke() //描边
}
// 6.随机产生的干扰小点
for (let i = 0; i < 40; i++) {
context.beginPath()
context.arc(random(0,width),random(0,height),1,0,2*Math.PI) //随机确定圆心坐标
context.closePath()
context.fillStyle = color(150,200) //随机填充颜色
context.fill() //进行填充
}
</script>
</body>
二、元素的拖拽 (Drag和 Drop)
元素的拖拽是H5的一个新的特性，是在页面中通过鼠标将元素从一个位置拖放到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
1. 实现过程：
（1）设置元素为可拖放：为了使元素可拖动，设置元素的draggable属性为true
<img src='' draggable='true'>
（2）拖动什么：给document注册一个ondragstart事件
ondragstart事件调用了一个函数，它规定了被拖动的数据
a.将被拖放的对象保存起来（即让document记忆下来）
b.在拖放的过程中可以设置被拖放对象的透明度
（3）放到何处：给document注册一个ondragover事件
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event,preventDefault) 方法(即: 浏览器会默认阻ondrop事件，所以必须在ondragover事件中阻止默认行为)
（4）当将被拖放的对象放到指定位置后，拖放的动作完成（拖放结束）：给document注册一个ondrop事件
2. 拖拽元素支持的事件
- ondrag: 应用于拖拽元素，在整个拖拽过程中都会调用
- ondragstart: 应用于拖拽元素，当拖拽开始时调用
- ondragleave: 应用于拖搜元素，当鼠标离开拖拽元素时调用
- ondragend: 应用于拖拽元素，当拖拽结束时调用
3. 目标元素支持的事件
- ondragenter: 应用于目标元素，当拖拽元素进入时调用
- ondragover: 应用于目标元素，当停留在目标元素上方时调用
- ondrop: 应用于目标元素，当在目标元素上方松开鼠标时调用
- ondragleave: 应用于目标元素，当鼠标离开目标元素时调用
4. 基本思想
（1）在拖放开始时在document中保存被拖放元素的id
（2）拖放结束时通过id找到被拖放的元素追加到文档流中
<style>
* {
padding: 0;
margin: 0;
}
.div1,
.div2,
.div3 {
margin: 0 20px;
float: left;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
div,
p {
display: flex;
flex-direction: column;
align-items: center;
}
.p1 {
width: 50px;
background-color: darksalmon;
margin: 5px 0;
}
.p2 {
width: 70px;
background-color: gold;
margin: 5px 0;
}
.p3 {
width: 90px;
background-color: yellowgreen;
margin: 5px 0;
}
.p4 {
width: 100px;
background-color: seagreen;
margin: 5px 0;
}
.p5 {
width: 150px;
background-color: blueviolet;
margin: 5px 0;
}
.p6 {
width: 170px;
background-color: firebrick;
margin: 5px 0;
}
</style>
<body>
<div id="div1" class="div1">
<p id="pe3" class="p3" draggable="true">3</p>
<p id="pe2" class="p2" draggable="true">2</p>
<p id="pe5" class="p5" draggable="true">5</p>
<p id="pe1" class="p1" draggable="true">1</p>
<p id="pe4" class="p4" draggable="true">4</p>
<p id="pe6" class="p6" draggable="true">6</p>
<a href="http://www.baidu.com" id="a1">百度一下</a>
</div>
<div id="div2" class="div2"></div>
<div id="div3" class="div3"></div>
<script>
document.ondragstart = function (e) {
e.dataTransfer.setData('text', e.target.id)//将被拖放的元素保存起来
e.target.style.opacity = 0.2//设置被拖放元素的透明度
}
document.ondragend = function (e) {
e.target.style.opacity = 1//拖放结束后，恢复拖放对象的透明度
}
document.ondragover = function (e) {//关闭浏览器默认的行为:默认情况下，浏览器不允许拖放
e.preventDefault()
}
document.ondrop = function (e) {
let id = e.dataTransfer.getData('text')
e.target.appendChild(document.getElementById(id))
}
</script>
</body>
