画布
# 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>