<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>

    window.onload = function(){

        var canvas = document.getElementById('canvas');

        canvas.width = 1024;

        canvas.height = 768;

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

        cxt.moveTo(100,100);

        cxt.lineTo(300,300);

        cxt.lineTo(100,300);

        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";

        cxt.fill();

        cxt.lineWidth = 1;

        cxt.strokeStyle = "red";

        cxt.stroke();

        cxt.closePath();

        cxt.moveTo(100,400)

        cxt.lineTo(400,400)

        cxt.lineTo(300,400)

        cxt.strokeStyle = "green";

        cxt.stroke();

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

</head>

<body>

    <canvas id="canvas" width="500px" height="500px;" style="border: 1px solid #000;"></canvas>

<script>

    window.onload = function(){

        var canvas = document.getElementById('canvas');

        canvas.width = 1024;

        canvas.height = 768;

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

        cxt.moveTo(100,100);

        cxt.lineTo(300,300);

        cxt.lineTo(100,300);

        cxt.lineTo(100,100);

        cxt.fillStyle = "rgb(2,100,30)";

        cxt.fill();

        cxt.lineWidth = 1;

        cxt.strokeStyle = "red";

        cxt.stroke();

        cxt.closePath();

        cxt.moveTo(100,400)

        cxt.lineTo(400,400)

        cxt.lineTo(300,400)

        cxt.strokeStyle = "green";

        cxt.stroke();

    }

</script>

</body>

</html>

H5 canvas 直线和三角形的更多相关文章

  1. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  3. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. iOS：quartz2D绘图(画一些简单的图形,如直线、三角形、圆、矩形、文字等)

    前一篇几乎已经详细介绍了Quartz2D的所有知识,这一篇以及后面就不废话了,主要是用具体的实例来演示绘图效果. 这里我们先来绘制一些简单的图形(如直线.三角形.圆.矩形.文字.图像),它有两种方式可 ...

  5. H5 canvas 绘图

    H5的canvas绘图技术   canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制 ...

  6. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  7. CoreGraphics-基本图形绘制-直线、三角形、矩形、椭圆形、弧形

    框架:CoreGraphics 步骤: 1."获取"图形上下文     let cxtRef = UIGraphicsGetCurrentContext()! 2.添加路径 3.渲 ...

  8. H5 canvas填充文字自动换行

    canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行.. 然后百度了一下,已 ...

  9. h5 canvas

    概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 使用前,首先需要新建一个canvas网页元素. & ...

随机推荐

  1. Spring Cloud 学习总结001-服务治理-Eureka

    学习参考:http://blog.didispace.com/Spring-Cloud%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/ spring cloud由[服务注册中 ...

  2. HDU1024 Max Sum Plus Plus —— DP + 滚动数组

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1024 Max Sum Plus Plus Time Limit: 2000/1000 MS ...

  3. Powershell 常见问题

    unapproved verbs WARNING: The names of some imported commands from the module 'todo' include unappro ...

  4. IE、W3C两种CSS盒子模型

    利用CSS来布局页面布局DIV有点逻辑性!重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都 ...

  5. html5--switch选择结构的优化

    html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...

  6. 使用C#开发HTTP服务器系列之Hello World

    各位朋友大家好,我是秦元培,欢迎大家关注我的博客.从今天起,我将开始撰写一组关于HTTP服务器开发的系列文章.我为什么会有这样的想法呢?因为人们对Web技术存在误解,认为网站开发是Web技术的全部.其 ...

  7. Recovery启动流程(1)--- 应用层到开机进入recovery详解

    转载请注明来源:cuixiaolei的技术博客 进入recovery有两种方式,一种是通过组合键进入recovery,另一种是上层应用设置中执行安装/重置/清除缓存等操作进行recovery.这篇文档 ...

  8. mac系统下设置eclipse的补全快捷键方法

    eclispe Word Completion 的默认快捷键是Alt+/eclipse Content Assist 的默认快捷键是Ctrl+Space在使用中发现Word Completion经常导 ...

  9. Linux网络协议栈(四)——链路层(1)

    1.接收帧当网络适配器接收到数据帧时,就会触发一个中断,中断处理程序执行一些需要及时处理的任务,然后在下半部进行其它可以延迟的处理.中断处理程序主要进行以下一些操作:(1)    分配sk_buff数 ...

  10. [OS][FS]查看ext3文件系统分区的superblock

    本文将介绍怎样读取一个分区的superblock: 1. 首先我们查看一下在磁盘上有哪些分区,通过fdisk -l 这里有三个分区,我们下面查看/dev/sda3(这是一个device file) 2 ...