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

悠悠 2022-06-13 10:50 234阅读 0赞

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

![1333971428_3753.png][]

代码不一定要一样，还有一种方法就是固定中间的那个点，然后在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>

[1333971428_3753.png]: https://img-my.csdn.net/uploads/201204/09/1333971428_3753.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 223 阅读

相关【Html5每日练习】canvas五彩缤纷的五角星

貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~![大笑][laugh.gif] 不过计算出来后还是有一点小小的错误，

待我称王封你为后i/ 2022年06月13日 12:16/ 0 赞/ 198 阅读

相关【Html5每日练习】canvas绘制坐标变换图形

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不

拼搏现实的明天。/ 2022年06月13日 12:14/ 0 赞/ 231 阅读

相关【Html5每日练习】canvas绘制线性渐变图形

<html lang="en-US"> <canvas id=myCanvas width=500px height=500px></canvas>

╰+哭是因爲堅強的太久メ/ 2022年06月13日 12:14/ 0 赞/ 239 阅读

相关【Html5 每日练习】canvas绘制弧形

<html lang="en-US"> <canvas id=myCanvas width=500px height=500px></canvas>

叁歲伎倆/ 2022年06月13日 11:56/ 0 赞/ 239 阅读

相关【Html5每日练习】canvas beginPath()的理解

路径是canvas里很重要的一个概念，刚开始学canvas的人对路径理解不是很深，他们在用canvas的时候会乱用beginPath(),今天做了一个小demo来说明一下路径

谁践踏了优雅/ 2022年06月13日 11:36/ 0 赞/ 213 阅读

相关【Html5每日练习】canvas笑脸

在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 <html lang="en-US"> <canvas id=myCan

￡神魔★判官ぃ/ 2022年06月13日 11:29/ 0 赞/ 267 阅读

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

上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一

悠悠/ 2022年06月13日 10:50/ 0 赞/ 235 阅读

相关【html5每日练习】html5 canvas画线

现在网络最火的是html5，没有之一，虽然正式版还没有出，但咱们可以期待着在未来几年，html5会霸占了互联网，所以毫无疑问得加入到html5的学习之中，谁学得快，谁就有可能把

港控/mmm°/ 2022年06月13日 10:50/ 0 赞/ 227 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 332 阅读