您的位置：首页 > Web前端 > HTML5

Html5之canvas绘图

2017-07-07 16:26 260 查看

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas"  width="600" height="600"> yourbrowser does not support the canvas tag </canvas>

<script>
//    1.矩形
//    var canvas = document.getElementById('myCanvas'); //先获取id
//    var ctx = canvas.getContext('2d');
//    ctx.fillStyle='#FF0000';
//    ctx.fillRect(0,0,80,100);
//  2.圆形
//    var canvas=document.getElementById("myCanvas");
//    var context=canvas.getContext("2d");
//    context.beginPath();
//    context.arc(200,150,50,0,Math.PI*2,true);
//    context.closePath();
//    context.fillStyle="rgba(255,0,0,0.25)";
//    context.fill();
//    3.渐变
//function draw25(id) {
//    var canvas = document.getElementById(id);
//    if (canvas == null)
//        return false;
//    var context = canvas.getContext('2d');
//    var g1 = context.createLinearGradient(0, 0, 0, 300);
//
//    g1.addColorStop(0, 'rgb(255,0,0)'); //红
//    g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
//    g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
//
//    //可以把lg对象理解成GDI中线性brush
//    context.fillStyle = g1;
//    //再用这个brush来画正方形
//    context.fillRect(0, 0, 400, 300);
//};
//draw25("myCanvas");
//    4.图形组合
function draw10(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext("2d");
var oprtns = new Array(
"source-over",
"destination-over",
"source-in",
"destination-in",
"source-out",
"destination-out",
"source-atop",
"destination-atop",
"lighter",
"xor",
"copy"
);
var i = 0;//组合效果编号

//结合setinterval动态显示组合
var interal = setInterval(function () {
if (i == 10) {
i=0;
}
else {
i++;
}
//蓝色矩形
context.fillStyle = "blue";
context.fillRect(10, 10, 60, 60);
//设置组合方式
context.globalCompositeOperation = oprtns[i];
//设置新图形（红色圆形）
context.beginPath();
context.fillStyle = "red";
context.arc(60, 60, 30, 0, Math.PI * 2, false);
context.fill();
}, 1000);

};
draw10("myCanvas");
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航