canvas画图（web作业）

通过canvas画图

效果图

HTML代码


<html><head><script type="application/javascript">function draw() {var canvas = document.getElementById('canvas');if (canvas.getContext) {var ctx = canvas.getContext('2d');// 房顶ctx.beginPath();ctx.moveTo(600, 100); //将“笔”移动到该坐标ctx.lineTo(400, 300);//画一条到该坐标的直线ctx.lineTo(800, 300);    ctx.fill();//将所有直线内部填充为黑色（默认填充颜色）// 房体ctx.fillRect(450, 300, 300, 250);//画一个从450,300坐标开始，宽为300，高为250的填充矩形// 左窗ctx.clearRect(500, 330, 50, 50);//檫去从500, 330坐标开始，宽高为50的矩形// 右窗ctx.clearRect(650, 330, 50, 50);// 门ctx.fillStyle = "rgb(255,255,255)";//设置填充颜色为白色ctx.beginPath();ctx.arc(600,460,50,0,Math.PI,true); //画一个以600,460为圆心，50为半径，以0弧度开始，逆时针旋转到，弧度为PI的半圆ctx.fill();ctx.clearRect(550, 460, 100, 85);ctx.fillStyle = "rgb(0,0,0)";ctx.fillRect(550,460, 100, 2);}
}</script></head><body onload="draw();"><canvas id="canvas" width="1000" height="1000"></canvas></body>
</html>

*JS代码

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

canvas画图（web作业）相关推荐

HTML5 Canvas实现web画图之自由画笔
最近需要做一个类似windows附件中的画图工具,是在web页面可以自由画图的,目前用的主要是HTML5的Canvas画布来实现该功能的. 而操作Canvas主要用的是在Google上找的一个Jque ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
java canvas添加图片上传_HTML5 canvas画图及图片上传服务器
上一个教程中我们实现了使用html5 canvas来制作涂鸦画板的效果,在这个教程中,我们将讲解如何将画好的图片上传到服务器上. 最后的效果如下图,当点击"开始画图"按钮,将在ca ...
用 canvas 实现 Web 手势解锁
手动实现一个 H5 手势解锁,具体的效果就像原生手机的九宫格解锁那样. 基本要求是这样的:将密码保存到 localStorage 里,开始的时候会从本地读取密码,如果没有就让用户设置密码,密码最少为五 ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
html5 canvas 画图移动端出现锯齿毛边的解决方法参考文章: (1)html5 canvas 画图移动端出现锯齿毛边的解决方法 (2)https://www.cnblogs.com/dear ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
解决canvas画图模糊的问题
canvas 画图经常发现他是模糊的.解决这个问题主要从两个方面下手. 改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子. 解决方案 var ctx = canvas.g ...
[转]html5 Canvas画图教程(1)—画图的基本常识
今天看到一个讲Canvas的教程,很通俗移动,所以转载了下. 虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascri ...
HTML5的Canvas画图模拟太阳系运转
今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分, 对于每一个星球我们要知道它的颜色和公转周期,如下图. 采用面向对象编程的思想,代码如下 ...

canvas画图（web作业）

通过canvas画图

canvas画图（web作业）相关推荐

最新文章

热门文章