【html5每日练习】 html5 canvas "米"

最新推荐文章于 2024-03-18 11:04:16 发布

boia

最新推荐文章于 2024-03-18 11:04:16 发布

阅读量1.2k

点赞数

分类专栏： html5 canvas 文章标签： html5 html border function 浏览器

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7442326

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一步步走过来的，从不懂到精通是需要一个漫长的步骤的，你越急，学的速度反而会很慢，所以这一篇还是画线有关的，有多条线画出一个“米字”，如果你对上一篇的JS代码已经懂得画，你可以不要看我的代码，自己写出来，先贴效图

代码不一定要一样，还有一种方法就是固定中间的那个点，然后在4周画线，努力思考下，你可以想到比我更简单的代码的

<!DOCTYPE HTML> 
<html lang="en-US">
<style>
	#myCanvas{border:blue 2px solid;}
</style>
<script>
	window.onload = function()
	{
		var myCanvas = document.getElementById("myCanvas");
		var context = myCanvas.getContext("2d");
		context.strokeStyle = "red";
		context.lineWidth = 5;
		context.beginPath();
		
		context.moveTo(200,100);context.lineTo(200,300);
		context.moveTo(100,200);context.lineTo(300,200);
		context.moveTo(100,100);context.lineTo(300,300);
		context.moveTo(300,100);context.lineTo(100,300);
		context.stroke();
	}
</script>
<canvas id=myCanvas width=400 height=400>你的浏览器不支持canvas</canvas>
</html>

boia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html5每日练习】 html5 canvas "米"

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一步步走过来的，从不懂到精通是需要一个漫长的步骤的，你越急，学的速度反而会很慢，所以这一篇还是画线有关的，有多条线画出一个“米字”，如果你对上一篇的JS代码已经懂得画，你可以不要看我的代码，自己写出来，先贴效图代码不一
复制链接

扫一扫

专栏目录