1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {margin: 0;padding: 0;}
  8.         canvas {border: 2px dotted #ddd}
  9.     </style>
  10. </head>
  11. <body>
  12.     <canvas id=drawingCanvas1 width=500 height=300></canvas>
  13.     <canvas id=drawingCanvas2 width=500 height=300></canvas>
  14.     <canvas id=drawingCanvas3 width=500 height=300></canvas>
  15.     <canvas id=drawingCanvas4 width=500 height=300></canvas>
  16.     <canvas id=drawingCanvas5 width=500 height=300></canvas>
  17.     <canvas id=drawingCanvas6 width=500 height=300></canvas>
  18.     <script>
  19.         // 直线
  20.         var canvas = document.getElementById('drawingCanvas1')
  21.         var context = canvas.getContext('2d')
  22.  
  23.         // 设置
  24.         context.lineWidth = 20 // 线条宽度
  25.         context.strokeStyle = 'rgba(205, 40, 40, 0.5)' // 线条颜色
  26.         context.lineCap = 'round' // 线头形状
  27.         context.moveTo(10, 10) // 起点
  28.         context.lineTo(400, 40) // 终点
  29.         // 绘制
  30.         context.stroke()
  31.  
  32.         /**
  33.          * 重新开始一个新线段的绘制
  34.          * 如果没有这一步，那么每次调用stroke()，都会把画布上原有的线段再重新绘制一遍
  35.          */
  36.         context.beginPath()
  37.         // 设置
  38.         context.lineCap = 'square'
  39.         context.moveTo(10, 10)
  40.         context.lineTo(400, 90)
  41.         // 绘制
  42.         context.stroke()
  43.  
  44.         // 三角形
  45.         var canvas = document.getElementById('drawingCanvas2')
  46.         var context = canvas.getContext('2d')
  47.  
  48.         context.moveTo(255, 50)
  49.         context.lineTo(50, 250)
  50.         context.lineTo(450, 250)
  51.         context.closePath()
  52.  
  53.         context.fillStyle = 'blue'
  54.         context.fill()
  55.  
  56.         context.lineWidth = 5
  57.         context.strokeStyle = 'red'
  58.         context.stroke()
  59. // 曲线
  60.         var canvas = document.getElementById('drawingCanvas4')
  61.         var context = canvas.getContext('2d')
  62.  
  63.         var centerX = 250
  64.         var centerY = 150
  65.         var radius = 100
  66.         var startingAngle = 0 * Math.PI
  67.         var endingAngle = 0.5 * Math.PI
  68.  
  69.         context.arc(centerX, centerY, radius, startingAngle, endingAngle)
  70.         context.closePath()
  71.         context.stroke()
  72.  
  73.         context.beginPath()
  74.         var endingAngle = 2 * Math.PI
  75.         context.arc(centerX, centerY, radius, startingAngle, endingAngle)
  76.         context.stroke()
  77.  
  78.         // 控制点
  79.         var canvas = document.getElementById('drawingCanvas5')
  80.         var context = canvas.getContext('2d')
  81.  
  82.         context.moveTo(100, 100)
  83.  
  84.         var control1_x = 60
  85.         var control1_y = 10
  86.         var control2_x = 40
  87.         var control2_y = 90
  88.         var endPointX = 0
  89.         var endPointY = 0
  90.  
  91.         context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y,
  92.             endPointX, endPointY)
  93.         context.stroke()
  94.  
  95.         // 变换
  96.         var canvas = document.getElementById('drawingCanvas6')
  97.         var context = canvas.getContext('2d')
  98.  
  99.         context.translate(100, 100)
  100.  
  101.         var copies = 10
  102.         for (var i = 1; i < copies; i++) {
  103.             context.rotate(2 * Math.PI * 1 / (copies -1))
  104.             context.rect(0, 0, 60, 60)
  105.         }
  106.         context.stroke()
  107.     </script>
  108. </body>
  109. </html>

☀【canvas】直线 / 三角形 / 矩形 / 曲线 / 控制点 / 变换的更多相关文章

  1. canvas绘制自定义的曲线，以椭圆为例，通俗易懂，童叟无欺

    本篇文章,将讲述如何通过自定义的曲线函数,使用canvas的方式进行曲线的绘制. 为了通俗易懂,将以大家熟悉的椭圆曲线为例,进行椭圆的绘制.至于其他比较复杂的曲线,用户只需通过数学方式建立起曲线函数, ...

  2. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  3. 基于canvas二次贝塞尔曲线绘制鲜花

    canvas中二次贝塞尔曲线参数说明: cp1x:控制点1横坐标 cp1y:控制点1纵坐标 x: 结束点1横坐标 y:结束点1纵坐标 cp2x:控制点2横坐标 cp2y:控制点2纵坐标 z:结束点2横 ...

  4. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  6. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  7. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

  8. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  9. for循环+canvas实现黑客帝国矩形阵

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

随机推荐

  1. PHP中刷新输出缓冲

    http://www.cnblogs.com/mutuan/archive/2012/03/18/2404957.html PHP中刷新输出缓冲buffer是一个内存地址空间,Linux系统默认大小一 ...

  2. Entity Framework 使用sql语句分页(查询单表)

    1.查询单表 var pageSize = 2;//条数 var pageIndex = 2;//索引 var sql = @" SELECT D.* FROM ( SELECT ROW_N ...

  3. "ERR_GFX_D3D_INIT", GTA5-报错解决办法

    GTA5 PC 版,online模式报错“ERR_GFX_D3D_INIT”. 网上搜到一篇文章,可以解决此问题: http://fixcrasheserrorguide.com/fix-grand- ...

  4. 02_Jquery_02_元素选择器

    [简述] 元素选择器就是通过元素名来查询元素 $("elementName")这里就可以通过元素名来获取jquery元素了. 但与id选择器不同的是,名称相同的元素有很多,所以获取 ...

  5. 九度OJ 1434 今年暑假不AC

    题目地址:http://ac.jobdu.com/problem.php?pid=1434 题目描述: “今年暑假不AC?”“是的.”“那你干什么呢?”“看世界杯呀,笨蛋!”“@#$%^&*% ...

  6. HttpUtility.HtmlEncode

    HttpUtility.HtmlEncode用来防止站点受到恶意脚本注入的攻击 public string Welcome(string name, int numTimes = 1) {     r ...

  7. 列表显示数据 但是数据的字体颜色要js添加

    1.需求:数据在前台显示,但是每个条记录的颜色要有点不同 1.java后台数据的处理 String ids=""; for(int x=0;x<sign.size();x++ ...

  8. express的基本配置项

    express自动生成的app.js中有一段代码用app.set和app.use对express进行配置,但这些配置都是什么意思,以及都能做哪些配置并没有展开.这一节就专门来讲express的配置.上 ...

  9. xml技术DTD约束定义

    XML约束 在XML技术中,可以编写一个文档来约束一个xml文档的书写规范,这称之为XML约束为什么需要XML约束? class.xml <stu><面积>?人怎么会有面积元素 ...

  10. MySQL下Limit使用及性能分析

    对于一直用Oracle的我,今天可是非常诧异,MySQL中同一个函数在不同数量级上的性能居然差距如此之大. 先看表ibmng(id,title,info)  唯一  id key 索引title 先看 ...