一,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(); } (我一个字都没落,实在懒得回忆是咋做的,那就照抄就行 反正用的少)