<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        * {margin: 0;padding: 0;}

        canvas {border: 2px dotted #ddd}

    </style>

</head>

<body>

    <canvas id=drawingCanvas1 width=500 height=300></canvas>

    <canvas id=drawingCanvas2 width=500 height=300></canvas>

    <canvas id=drawingCanvas3 width=500 height=300></canvas>

    <canvas id=drawingCanvas4 width=500 height=300></canvas>

    <canvas id=drawingCanvas5 width=500 height=300></canvas>

    <canvas id=drawingCanvas6 width=500 height=300></canvas>

    <script>

        // 直线

        var canvas = document.getElementById('drawingCanvas1')

        var context = canvas.getContext('2d')

        // 设置

        context.lineWidth = 20 // 线条宽度

        context.strokeStyle = 'rgba(205, 40, 40, 0.5)' // 线条颜色

        context.lineCap = 'round' // 线头形状

        context.moveTo(10, 10) // 起点

        context.lineTo(400, 40) // 终点

        // 绘制

        context.stroke()

        /**

         * 重新开始一个新线段的绘制

         * 如果没有这一步，那么每次调用stroke()，都会把画布上原有的线段再重新绘制一遍

         */

        context.beginPath()

        // 设置

        context.lineCap = 'square'

        context.moveTo(10, 10)

        context.lineTo(400, 90)

        // 绘制

        context.stroke()

        // 三角形

        var canvas = document.getElementById('drawingCanvas2')

        var context = canvas.getContext('2d')

        context.moveTo(255, 50)

        context.lineTo(50, 250)

        context.lineTo(450, 250)

        context.closePath()

        context.fillStyle = 'blue'

        context.fill()

        context.lineWidth = 5

        context.strokeStyle = 'red'

        context.stroke()

// 曲线

        var canvas = document.getElementById('drawingCanvas4')

        var context = canvas.getContext('2d')

        var centerX = 250

        var centerY = 150

        var radius = 100

        var startingAngle = 0 * Math.PI

        var endingAngle = 0.5 * Math.PI

        context.arc(centerX, centerY, radius, startingAngle, endingAngle)

        context.closePath()

        context.stroke()

        context.beginPath()

        var endingAngle = 2 * Math.PI

        context.arc(centerX, centerY, radius, startingAngle, endingAngle)

        context.stroke()

        // 控制点

        var canvas = document.getElementById('drawingCanvas5')

        var context = canvas.getContext('2d')

        context.moveTo(100, 100)

        var control1_x = 60

        var control1_y = 10

        var control2_x = 40

        var control2_y = 90

        var endPointX = 0

        var endPointY = 0

        context.bezierCurveTo(control1_x, control1_y, control2_x, control2_y,

            endPointX, endPointY)

        context.stroke()

        // 变换

        var canvas = document.getElementById('drawingCanvas6')

        var context = canvas.getContext('2d')

        context.translate(100, 100)

        var copies = 10

        for (var i = 1; i < copies; i++) {

            context.rotate(2 * Math.PI * 1 / (copies -1))

            context.rect(0, 0, 60, 60)

        }

        context.stroke()

    </script>

</body>

</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. J2EE、J2SE、J2ME

    http://developer.51cto.com/art/200906/130453.htm 本文介绍Java的三大块:J2EE.J2SE和J2ME.J2SE就是Java2的标准版,主要用于桌面应 ...

  2. Excel表数据导入数据库表中

    ***Excel表数据导入到数据库表中 通过数据库表的模板做成‘Excel’表的数据导入到数据库相应的表中(注意:主表 和 从表的关系,要先导‘主表’在导入从表) 过程:通过数据库的导入工具—先导入为 ...

  3. linq 多条件查询 where 拼接+分页

    首先定义一个静态类 public static class QueryAssembly { /// <summary> /// 返回true /// </summary> // ...

  4. 巧谈 GCD

    转载自:http://www.jianshu.com/p/665261814e24 谈到iOS多线程,一般都会谈到四种方式:pthread.NSThread.GCD和NSOperation.其中,苹果 ...

  5. OC与Swift的区别二(常量、变量、运算符)

    4.常量与变量声明 oc的变量声明使用  类型 变量名 ＝ 变量值的方式,其中类型为系统内置数据类型或自定义类型,变量名需由英文字母开头且不能包含特殊字符 swift变量声明使用 var 变量名 ＝ ...

  6. bzoj1231: [Usaco2008 Nov]mixup2 混乱的奶牛

    思路:状压dp,设f[i][j]表示当前已经选出的牛的状态为i,最后一头选出的牛为j的方案数. 然后注意就是初值不能是f[0][i]=1,因为所有牛本来都可以第一个被选中,然而这样一定初值有些牛可能就 ...

  7. c++ 中的8种智能指针[转]

    一.简介 由于 C++ 语言没有自动内存回收机制,程序员每次 new 出来的内存都要手动 delete.程序员忘记 delete,流程太复杂,最终导致没有 delete,异常导致程序过早退出,没有执行 ...

  8. 如何判断list中是否包含某个元素

    在python中可以通过in和not in关键字来判读一个list中是否包含一个元素: str = ['s','i','m','o','n'] if 'e' in str: print("e ...

  9. 在Windows下不使用密码远程登陆Linux

    在登陆Linux进行管理的时候我们通常会使用用户名和密码进行登陆,这样一来是比较麻烦,二来是不安全,为了解决这个问题,我们可以使用公私钥 (public keys和private keys)进行认证. ...

  10. shell脚本修复MySQL主从同步

    发布:thebaby   来源:net     [大 中 小] 分享一例shell脚本,用于修改mysql的主从同步问题,有需要的朋友参考下吧. 一个可以修改mysql主从同步的shell脚本. 例子 ...