用HTML5图形拼成的画房子,canvas画小房子（补充:简陋的小房子）

小房子

#cvs{

background:pink;

}

您的浏览器不支持canvas标签！

var canvas=document.getElementById("cvs");

var cxt=canvas.getContext("2d");

//窗户

cxt.strokeRect(50,50,200,200);

cxt.fillStyle = "skyblue";

cxt.fillRect(80,80,50,50);

cxt.beginPath();

cxt.rect(50,50,200,200);

cxt.stroke();

cxt.closePath();

cxt.beginPath();

cxt.moveTo(50,50);

cxt.lineTo(150,10);

cxt.lineTo(250,50)

cxt.closePath();

cxt.stroke();

//窗户杠

cxt.beginPath();

cxt.moveTo(105,80);

cxt.lineTo(105,130);

cxt.closePath();

cxt.stroke();

cxt.moveTo(80,105);

cxt.lineTo(130,105);

cxt.closePath();

cxt.stroke();

//门

cxt.strokeRect(50,50,200,200);

cxt.fillStyle = "gray";

cxt.fillRect(180,150,50,100);

cxt.beginPath();

cxt.rect(50,50,200,200);

cxt.stroke();

cxt.closePath();

//门把手

cxt.beginPath();

cxt.strokeRect(215,200,5,10);

cxt.fillStyle = "black";

cxt.fillRect(215,200,5,10);

cxt.stroke();

cxt.closePath();

//烟囱

cxt.beginPath();

cxt.moveTo(175,20);

cxt.lineTo(175,10);

cxt.closePath();

cxt.stroke();

cxt.moveTo(195,30);

cxt.lineTo(195,10);

cxt.closePath();

cxt.stroke();

cxt.moveTo(175,10);

cxt.lineTo(195,10);

cxt.closePath();

cxt.stroke();

用HTML5图形拼成的画房子,canvas画小房子（补充:简陋的小房子）相关推荐

用HTML5图形拼成的画房子,未来的房子绘画作品图片欣赏
有很多的孩子都在好奇未来的房子是怎么样的,所以他们画出了很多的绘画作品来满足他们的好奇心.学习啦小编整理了未来的房子绘画作品,欢迎欣赏! 未来的房子绘画作品图片展示未来的房子儿童画作品未来的房子作 ...
html5游戏开发--动静结合(二)-用地图块拼成大地图初探lufylegend
一.前言本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟& ...
python画三维几何图形拼成的图案_Scratch3.0少儿编程案例：循环画窗花
一.案例简介窗花艺术是我国非物质文化遗产,每逢过年过节的时候,家家户户都在窗户上贴满窗花.今天我们就来用scratch 3.0来制作少儿编程案例:循环画窗花.简单的窗花图案都是对称的,由多个重复的简 ...
python几何拼贴画_【中班综合活动：图形大变身】中班美术图形拼贴画
活动背景我班幼儿已经对正方形.长方形.三角形.圆形等图形有了基本的认识,并对其他各种图形也有着浓厚的兴趣.他们对我班正在进行的线描画活动和故事.玩具讲述活动同样兴趣盎然.于是,我设计开展了这个&qu ...
python画三维几何图形拼成的图案_使用 AntV/G2/G2Plot 如何优化图表体验
G2Plot v2 版本,从今年 8 月开始开发,目前差不多已经快 4 个月了,达成:25+ 常用的统计图表 80% 图表在复杂 BI,LowCode 产品中使用验证 97% 代码单测覆盖率 5+ 积 ...
用python七巧板模型拼图形,七彩课堂｜有趣的图形拼组
原标题:七彩课堂|有趣的图形拼组你们认识平面图形吗?知道什么是七巧板吗? 顾名思义,七巧板是由七块板组成的.由于等积变换,所以这七块板可拼成许多图形(1600种以上),例如:三角形.四边形.不规则多 ...
如何将Visio图形转换成EPS格式【mark from百度知道】
因为TeX系统只支持EPS格式的图形插入,但平常我们用得最广泛的是Visio,因此如何有效的转换成为了广大TeX初学者面临的一个比较棘手的问题,下面是我收集到的几种方法,个人推荐方法一.方法一:就是用 ...
国内首部HTML5技术之拉米牌游戏项目实战(涉及智能AI+HTML5图形+HTML5事件模型+网络通讯)...
课程学习地址:http://***/goods.php?id=186 课程适合人群: 本课程适合Java人群.ASP.NET人群.美工及各类前端设计者学习,学员只需要懂得基本的程序设计思想 ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...

用HTML5图形拼成的画房子,canvas画小房子（补充:简陋的小房子）

用HTML5图形拼成的画房子,canvas画小房子（补充:简陋的小房子）相关推荐

最新文章

热门文章