html5-02 画布标签详解

一,navas 画布标签
  <canvas width="600" height="400" id="mycanvas" ></canvas>

二,画图基本步骤
(一),首先创建画布，添加到页面(必要)
(二),获取canvas 进行设置(必要)
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext('2d');

(三),确定填充的图形
1,画线(矩形,五角型,三角形等一切线行)
ctx.moveTo(0,0)// 起始坐标
ctx.lineTo(100,100)//终止坐标

2,画圆
x,y, 起始位置（圆心位置） r（40）半径 0（开始角度），2*Math.PI 结束角度 true 逆时针  false顺时针
ctx.beginPath();
ctx.arc(100,100,40,0,2*Math.PI,true) //画圆
ctx.stroke();//画线

3,面型颜色,线性颜色
画线的颜色
ctx.strokeStyle = 'red'
填充图形的颜色
ctx.fillStyle = 'pink'

ctx.fill();//画图
ctx.stroke();//画线

三,两种渐变色
1,圆形渐变色
createRadialGradient(x1,y1,r1,x2,y2,r2) x1,y1,x2,y2,代表的是圆的开始坐标和结束坐标 r代表的是半径
var grd = ctx.createRadialGradient(100,100,5,150,60,100)
    grd.addColorStop('0','red');
    grd.addColorStop('1','green');
    ctx.fillStyle = grd;
    ctx.fill()

2,矩形渐变
起点位置(0,0)  终止位置(200,0)
var grd = ctx.createLinearGradient(0,0,200,0)
        grd.addColorStop('0','red');
        grd.addColorStop('1','green');
        ctx.fillStyle = grd; 
     ctx.fillRect(100,50,100,50);

四,画布写入文字
// fillText('内容'，x,y) x,y代表的坐标
    ctx.font = '40px Arial';
    ctx.fillText('hellow',100,100)

五,画布常见问题
1,渐变色属性会污染最近的一个原形颜色
解决方法:在之间设置一个无半径的圆,可完美解决
2,画布只能设置一个 var ctx = c.getContext('2d');
无法解决
六,拖拽
三个事件一个属性两个阻止默认行为
都是div需要阻止默认事件,一个是移上来不能不给移,一个是放进去不能不给放
img则只需要设置可以拖动即可,两个都需要加上id
三个事件都需要传入event事件
<div id="div1" ondrop="drop(event)" ondragover="dragover(event)"></div>
 <img src="./images/logo.png" alt="" draggable="true" ondragstart="drag(event)"
  id="img1">

拖拽事件
function drag(event) {
        // dataTransfer 是一个对象，作用就是存储拖拽过程中的数据  setData(数据类型，要拖拽的对象)
            event.dataTransfer.setData('a',event.target.id)
     }

放下
 function drop(event) { 
        event.preventDefault();
        var data =  event.dataTransfer.getData('a');
        document.getElementById('div1').appendChild(document.getElementById(data));
    }

主要目的是为了能把拖拽的元素放到div中
    function dragover(event) { 
        // 需要阻止div的默认行为
        event.preventDefault();
     }

(我一个字都没落,实在懒得回忆是咋做的,那就照抄就行 反正用的少)