介绍 & lt; !html DOCTYPE html> & lt; lang=癳n"比;
& lt; head>
& lt;元charset=癠TF-8"/比;
& lt; title>帆布绘制七巧板& lt;/title>
& lt;/head>
& lt; body>
& lt; style>
#帆布{边界:1 px固体# aaa级;text-align:中心;}
& lt;/style>
& lt;帆布id=癱anvas"宽度=?00”;身高=?00“比;
当用户浏览器不支持画布,请更换浏览器重试!
& lt;/canvas>
& lt;/body>
& lt;/html> var七巧板=[
{p: [{x: 0 y: 0}, {x: 800 y: 0}, {x: 400 y: 400}),颜色:“# caff67"},
{p: [{x: 0 y: 0}, {x: 400 y: 400}, {x: 0 y: 800}),颜色:“# 67 becf"},
{p: [{x: 800 y: 0}, {x: 800 y: 400}, {x: 600 y: 600}, {x: 600 y: 200}),颜色:“# ef3d61"},
{p: [{x: 600 y: 200}, {x: 600 y: 600}, {x: 400 y: 400}),颜色:“# f9f51a"},
{p: [{x: 400 y: 400}, {x: 600 y: 600}, {x: 400 y: 800}, {x: 200 y: 600}),颜色:“# a594c0"},
{p: [{x: 200 y: 600}, {x: 400 y: 800}, {x: 0 y: 800}),颜色:“# fa8ecc"},
{p: [{x: 800 y: 400}, {x: 800 y: 800}, {x: 400 y: 800}),颜色:“# f6ca29"}
];//七巧板的七块图形,p为各顶点坐标,颜色为颜色窗口。onload=function () {var帆布=. getelementbyid (“canvas");如果(canvas.getContext (“2 d")){//判断浏览器是否支持画布
var=canvas.getContext上下文(“2 d");(var=0;我& lt;tangram.length;我+ +){
画(七巧板[我],上下文);
cxt}函数画(块){
cxt.beginPath ();
cxt.moveTo (piece.p [0]。x, piece.p [0] .y);(var i=1;我& lt;piece.p.length;我+ +){
cxt.lineTo (piece.p[我]。x, piece.p[我].y);
}
cxt.closePath ();
cxt。fillStyle=piece.color;
cxt.fill ();
cxt。strokeStyle=癰lack";
cxt。线宽=5;
cxt.stroke ();
}
其他}{
alert(“不支持画布,请更换浏览器!“)
}
};
这篇文章主要介绍了如何用帆布来绘制彩色七巧板,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
HTML代码
js代码如下所示:
感谢你能够认真阅读完这篇文章,希望小编分享如何用帆布来绘制彩色七巧板内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
