# HTML 5# ### 2015-9-9知识点总结 ### ##画布:## <p>一个页面可以有多个画布</p> <canvas id="cs" width="1000" height="800"></canvas> //不能用margin:auto设置左右居中 <script> var cs=document.getElementById("cs"); var context=cs.getContext(); //获取画笔; context.fillStyle = "red"; //设置填充色 context.strokeStyle = "blue"; //设置填充边框颜色 context.lineWidth = 2; //设置线条的宽度 function drawShadow(){} context.shadowBlur = 15; //设置阴影模糊级别 context.shadowColor = "black"; //绘制有阴影的颜色 } drawShadow(); //绘制有渐变的图形 var linearGradient = context.createLinearGradient(10,10,110,10); linearGradient.addColorStop(0,"white"); linearGradient.addColorStop(0.5,"red"); linearGradient.addColorStop(1,"white"); context.fillStyle = linearGradient; //绘制矩形 context.fillRect(10,10,100,50); //绘制“被填充”的矩形 context.strokeRect(120,10,100,50); //绘制矩形（无填充） context.fillStyle = "red"; //绘制“被填充”的矩形颜色 context.rect(230,10,100,50); //绘制矩形 context.fill(); context.stroke(); function drawArc(num){ //绘制圆形 context.fillStyle = "rgba(255,0,0,0.5)"; context.beginPath(); //重置路径，开始新的路径 context.arc(100+num*100,150,50,0,2*Math.PI); //绘制圆形 context.fill(); //填充 context.stroke(); //绘制已定义的路径 } function drawLine(){//绘制路径 context.save(); context.scale(1.5,1.5); //缩放当前绘图至更大或更小 context.beginPath(); //起始一条路径，或重置当前路径 context.strokeStyle = "green" //绘制矩形（无填充)颜色 context.moveTo(200,250); //起始位置 context.lineTo(150,300); //线条路劲 context.lineTo(250,300); context.closePath(); //创建从当前点回到起始点的路径 context.restore(); //重置所有的设置 } drawLine(); function drawBezier(){ //创建贝塞尔曲线 context.strokeStyle = "black"; context.beginPath(); context.moveTo(200,100); context.quadraticCurveTo(450,250,200,550); //创建二次贝塞尔曲线 context.bezierCurveTo(450,150,150,350,200,550); //创建三次方贝塞尔曲线 context.stroke(); } function drawImage(){ //向画布上绘制图像、画布或视频 img1.onload = function(){ var x = 1; setInterval(function(){ console.log(1); context.save(); context.translate(725,225); //设置画布上的 (0,0) 位置 context.rotate(Math.PI/180*x); //设置旋转角度 //绘制图片 context.drawImage(img1,-125,-125,250,250); //在画布上定位图像 context.restore(); x++; },10) //没1/100秒旋转 pi/180的角度 } } drawImage(); </script>
转载于:https://www.cnblogs.com/lily-w/p/4805422.html
相关资源：HTML5画布时钟