HTML5画布

标签：

<canvas id="cs" width="1000" height="800"></canvas>
<script>
(function(){
//获取画布
var cs = document.getElementById("cs");
//获取画笔
var context = cs.getContext("2d");

//创建一个image对象
var img1 = new Image();
img1.src = "../image/1.jpg";

//设置填充色
context.fillStyle = "red";
//设置填充边框颜色
context.strokeStyle = "blue";
//设置线条的宽度
context.lineWidth = 2;

//绘制有阴影的图形
context.shadowBlur = 15;
//设置阴影颜色
context.shadowColor = "black";

//绘制有渐变的图形
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();//填充当前绘图,对应fillRect
context.stroke();//绘制已定义的路径,对应strokeRect

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();
}
//循环10个圆形
for(var i = 0;i < 10;i++){
drawArc(i);
}

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.moveTo(200,275);//把路径移动到画布中的指定点，不创建线条
context.lineTo(150,325);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
context.lineTo(250,325);
context.closePath();//创建从当前点回到起始点的路径
context.fill();
//重置所有的设置
context.restore();
}
function drawBezier(){
context.strokeStyle = "black";
context.beginPath();
context.moveTo(200,100);
//创建三次方贝塞尔曲线,两个控制点
context.bezierCurveTo(450,150,150,350,200,550);
context.stroke();

}
function drawImage(){
img1.onload = function(){
var x = 1;
setInterval(function(){
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)
}

}

}())
</script>

HTML5画布

标签：

原文地址：http://www.cnblogs.com/yocia/p/4804582.html