<!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. ArcGis for WPF(1)

    这篇文章主要是讲窗体中怎么加载一张在线地图. 第一步:首先引用ESRI.ArcGIS.Client.dll类库. 第二步:在XAML中添加如下代码: <Window x:Class=" ...

  2. JavaScript使用技巧

    使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...

  3. 01_反射_04_反射类的main方法

    [User.java] package com.Higgin.reflect; public class User { public User(){ System.out.println(" ...

  4. 飞锐GIS开发基础系列

    3s知识库和GIS科研站,未经允许,禁止任何形式的复制.转载和传播.联系方式:276888624@qq.com 品GIS,品开发,品人生...... http://www.3sbase.com/3sb ...

  5. Codevs 1138 聪明的质监员 2011年NOIP全国联赛提高组

    1138 聪明的质监员 2011年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 小 T 是一名质量监督员, ...

  6. [zz]安装Ubuntu 15.10后要做的事

    很有用,收藏 http://blog.csdn.net/skykingf/article/details/45267517

  7. 7种基本排序算法的Java实现

    7种基本排序算法的Java实现 转自我的Github 以下为7种基本排序算法的Java实现,以及复杂度和稳定性的相关信息. 以下为代码片段,完整的代码见Sort.java 插入排序 /** * 直接插 ...

  8. （转载）在Delphi中利用MSDASC来配置数据库链接

    在Delphi中利用MSDASC来配置数据库链接 在运行期进行数据库的连接是一个问题,自己写一个窗体配置吧,数据库不一样,所用的参数也不一样,还有那讨厌的连接字符串,有时真不知该写什么好.那天无意中发 ...

  9. OS概论1

    1.设计现代OS的主要目标是什么? 在计算机上配置操作系统,其主要目标是:方便性,有效性,可扩充性,开放性. 一个没有OS的操作系统,就必须用机器语言书写程序,如果在计算机上配置了OS,系统便可以使用 ...

  10. Django web 开发指南 no such table:

    在学习django web开发指南时,发布新博客点击save后会有error提示:no such table balabalabala... 百度了一下说重新运行manage.py syncdb 就可 ...