Js_canvas_01
来源：互联网 发布：2017php视频教程百度云 编辑：程序博客网 时间：2024/06/05 05:21
svg资料
Canvas需要在标签里加属性 设置宽高
Canvas默认的宽高 300*150
WebGL可以实现3D效果 Canvas 本身不支持3D效果
1.绘制路径
<canvas id="myCavas" width="800" height="600" style="border:1px solid black">您的浏览器版本太低，赶紧换一个吧</canvas><script type="text/javascript">//获取元素var c= document.getElementById("myCavas");//获取绘图元素对象var ctx = c.getContext("2d");//1.设置起始位置 X轴 Y 轴ctx.moveTo(100, 100);//2.设置结束位置ctx.lineTo(200, 100);//3.加线条颜色ctx.strokeStyle = "red";//4.渲染ctx.stroke();//开辟新的绘制路径，否则后面的颜色会覆盖ctx.beginPath();ctx.moveTo(100, 200);ctx.lineTo(200, 200);ctx.lineTo(200, 300);ctx.strokeStyle = "blue";ctx.closePath();//闭合路径ctx.stroke();ctx.beginPath();ctx.moveTo(100, 200);ctx.lineTo(100, 300);ctx.lineTo(200, 300);ctx.closePath();ctx.strokeStyle = "red";ctx.stroke();//填充绘制ctx.beginPath();ctx.moveTo(100, 400);ctx.lineTo(200, 400);ctx.lineTo(200, 500);ctx.fillStyle = "red"ctx.closePath();ctx.fill();//矩形擦除 X轴 Y轴 Width 宽 Height 高//清空指定位置的 矩形区域//ctx.clearRect(100, 200, 50, 50);//清除整个画布//ctx.clearRect(0, 0, c.width, c.height);ctx.beginPath();ctx.lineWidth = "100"; //设置线的宽度//端点样式 ://butt默认 //round圆角 //square平角（设置后，两端边长宽度的一半）ctx.lineCap = "round";ctx.moveTo(300, 200);ctx.lineTo(400, 300);ctx.stroke();</script>02绘制矩形
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid black;"></canvas><script type="text/javascript">var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.strokeStyle = "blue";ctx.lineWidth = "10";//连接线连接点样式//miter 默认 round 圆角 bevel 斜角ctx.lineJoin = "round";//下面 自动完成beginPath() ctx.strokeRect(10, 10, 100, 200);ctx.fillStyle = "red";ctx.fillRect(200, 10, 100, 200);</script>3.画板
<style type="text/css">#myButton { display: inline-block; width: 200px; height: 100px; background: green; font-size: 50px;}#myCanvas { cursor: crosshair;}</style></head><body><canvas id="myCanvas" width="800" height="500" style="border: 1px solid black;"></canvas><button id="myButton" onclick="reset()">重置</button><script type="text/javascript">var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");//绑定鼠标点击事件c.onmousedown = function(e) { var e = e || window.event; ctx.beginPath(); ctx.moveTo(e.clientX - c.offsetLeft, e.clientY - c.offsetTop); ctx.strokeStyle = randColor(); c.onmousemove = function(e) { var e = e || window.event; ctx.lineTo(e.clientX - c.offsetLeft, e.clientY - c.offsetTop); ctx.lineWidth = "10"; ctx.lineCap = "round"; ctx.stroke(); }}c.onmouseup = function() { c.onmousemove = null;}function reset() { window.location.reload();}function randColor() { var r = Math.floor(Math.random() * (255 - 0 + 1) + 0); var g = Math.floor(Math.random() * (255 - 0 + 1) + 0); var b = Math.floor(Math.random() * (255 - 0 + 1) + 0); return "rgb(" + r + "," + g + "," + b + ")";}</script>4.钟表
<canvas id="canvas" width="800" height="800" style="border: 1px solid black;"></canvas> <script>var theCan = document.getElementById("canvas");var ctx = theCan.getContext("2d");function toDraw(){ // 圆心位置 var x = 200; var y = 200; var r = 150; // 清除画布内容 ctx.clearRect(0,0,theCan.width,theCan.height); // 获取当前时间 var ODate = new Date(); var oHours = ODate.getHours(); var oMin = ODate.getMinutes(); var oSen = ODate.getSeconds(); // 计算角度值 oMin / 2： 一分钟走 多少度 var hoursValue = (-90 + oHours * 30 + oMin / 2) * Math.PI/180; var minValue = (-90 + oMin * 6) * Math.PI/180; var senValue = (-90 + oSen * 6) * Math.PI/180; // 绘制刻度 ctx.beginPath(); for(var i = 0; i < 60; i++){ ctx.moveTo(x,y); ctx.arc(x,y,r,i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180,false); } ctx.closePath(); ctx.stroke(); //覆盖白色圆 ctx.beginPath(); ctx.fillStyle = "#FFFFFF"; ctx.moveTo(x,y); ctx.arc(x,y,r - 5, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); //绘制刻度12 ctx.beginPath(); ctx.lineWidth = 5; for(var i = 0; i < 12; i++){ ctx.moveTo(x,y); ctx.arc(x,y,r,i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180,false); } ctx.closePath(); ctx.stroke(); //覆盖白色圆 ctx.beginPath(); ctx.fillStyle = "#FFFFFF"; ctx.moveTo(x,y); ctx.arc(x,y,r - 10, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); // 画时针 ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y,r - 75, hoursValue,hoursValue,false); ctx.closePath(); ctx.stroke(); // 分针 ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y,r - 60, minValue,minValue,false); ctx.closePath(); ctx.stroke(); // 秒针 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y,r - 30, senValue,senValue,false); ctx.closePath(); ctx.stroke();}setInterval(function(){ toDraw();},1000);</script>5.圆弧
<canvas id="myCanvas" width="800" height="500" style="border: 1px solid black;"></canvas><script type="text/javascript">var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.beginPath();ctx.moveTo(200, 200); //起点 可以形成扇形//X坐标 Y坐标 ：圆心 半径 起始角度 结束角度 是否顺时针 false :顺时针//弧度 = 角度 * PI /180ctx.arc(200, 200, 100, 0, 90 * Math.PI / 180, false);ctx.fill();//饼状图//设置数据var data = [{ value: 0.3, color: "red" }, { value: 0.1, color: "blue" }, { value: 0.2, color: "green" }, { value: 0.4, color: "pink" }, ] //圆心var beginX = 300;var beginY = 300;//半径var radius = 100;//起始角度var tempAngle = -90;for(var i = 0; i < data.length; i++) { var angle = data[i].value * 360; //起始弧度 var beginAngle = tempAngle * Math.PI / 180; var endAngle = (tempAngle + angle) * Math.PI / 180; ctx.beginPath(); ctx.moveTo(beginX, beginY); ctx.fillStyle = randColor(); //ctx.fillStyle = data[i].color; ctx.arc(beginX, beginY, radius, beginAngle, endAngle, false); ctx.closePath(); ctx.fill(); tempAngle += angle;}function randColor() { var r = Math.floor(Math.random() * (255 - 0 + 1) + 0); var g = Math.floor(Math.random() * (255 - 0 + 1) + 0); var b = Math.floor(Math.random() * (255 - 0 + 1) + 0); return "rgb(" + r + "," + g + "," + b + ")";}</script>6.二次贝塞尔曲线
ctx.beginPath();ctx.moveTo(100, 100);（控制点坐标 结束点坐标）ctx.quadraticCurveTo(100, 300, 300, 100);ctx.stroke();7.三次贝塞尔曲线
ctx.beginPath();ctx.moveTo(100, 100);//三次贝塞尔曲线（控制点坐标 控制点坐标 结束点坐标）ctx.bezierCurveTo(100, 300, 300, 300, 300, 100);ctx.stroke();8.gossip
<canvas id="canvas" width="800" height="600" style="border: 1px solid black;"></canvas><script> var oCanvas = document.getElementById("canvas"); var ctx = oCanvas.getContext("2d"); ctx.translate(400, 300); function toDraw() { ctx.clearRect(0,0,800,600); ctx.rotate(Math.PI/180); //最大圆 ctx.beginPath(); ctx.arc(0, 0, 200, 0, 2 * Math.PI, false); ctx.fill(); //白的半圆 ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(0, 0, 200, 0.5 * Math.PI, 1.5 * Math.PI, false); ctx.fill(); //小圆黑的 ctx.beginPath(); ctx.fillStyle = "black"; ctx.arc(0, -100, 100, 0, 2 * Math.PI, false); ctx.fill(); //小圆白的 ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(0, 100, 100, 0, 2 * Math.PI, false); ctx.fill(); //小圆点白 ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(0, -100, 25, 0, 2 * Math.PI, false); ctx.fill(); //小圆点黑 ctx.beginPath(); ctx.fillStyle = "black"; ctx.arc(0, 100, 25, 0, 2 * Math.PI, false); ctx.fill(); window.requestAnimationFrame(toDraw); } window.requestAnimationFrame(toDraw);</script> 0 0
