【html5每日练习】html5 canvas画线

最新推荐文章于 2022-02-27 22:33:18 发布

boia

最新推荐文章于 2022-02-27 22:33:18 发布

阅读量9.1k

点赞数 1

分类专栏： html5 canvas 文章标签： html5 html function 浏览器互联网网络

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

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把握住新时代的潮流，今天开始最简单的html5的学习，画线，画线是动画的基础，可能你会说花点才是基础，的确如此，canvas上的画就是一个个像素组成的。下面是今天写的一个程序，简单易懂

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

效果如下:

boia

关注

1
点赞
踩
1

收藏

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

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把握住新时代的潮流，今天开始最简单的html5的学习，画线，画线是动画的基础，可能你会说花点才是基础，的确如此，canvas上的画就是一个个像素组成的。下面是今天写的一个程序，简单易懂 window.onload
复制链接

扫一扫

专栏目录