<!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. 插入排序算法--直接插入算法，折半排序算法，希尔排序算法（C#实现）

    插入排序算法主要分为:直接插入算法,折半排序算法(二分插入算法),希尔排序算法,后两种是直接插入算法的改良.因此直接插入算法是基础,这里先进行直接插入算法的分析与编码. 直接插入算法的排序思想:假设有 ...

  2. 学习笔记6_Java_day11_JSP_基础和入门（1、2）

    主要内容:1. JSP基础2. Cookie3. HttpSession ================================ JSP基础 1. jsp的作用: * Servlet: &g ...

  3. UIWebView和UIActivityIndicatorView的结合使用

    环境:Xcode6.1 UIWebView是iOS开发中常用的一个控件,是内置的浏览器控件,我们可以用它来浏览网页,加载文档等.这篇文件将结合UIActivityIndicatorView控件制作一个 ...

  4. java swing窗口放置屏幕中央问题思考

    java swing窗口放置屏幕中央问题思考 以前总是尝试各种方法都没有能把组件放到屏幕中央,只能用死办法,设置绝对坐标,但这样就失去了可移植性,而且繁琐.今天仔细思考了一番,终于被我找出问题所在. ...

  5. Javascript模仿C语言的链表实现（增删改查），并且使用控制台输入输出

    Js新手最近在研究Js数据结构,刚好看到链表实现这一块儿,觉得有些资料和自己理解的有冲突,于是借着自己以前一点点C语言的基础,用Javascript模仿了C的链表实现,并且用了process.stdi ...

  6. GIS科研站

    http://www.3sbase.com/3sbase/ 近年来,地理信息科学发展迅猛,科研人员日益增多,但目前尚缺乏良好的交流平台,致使优秀的科研成果难以推广.同时,对于大量的GIS学生而言,对国 ...

  7. Java 单链表的倒置

    在面试,笔试的过程中经常会遇到面试官问这种问题,实现单链表的倒置方法.现在对单链表的倒置犯法做个记录,方便自己以后查看. 单链表的定义: public class Node { int v; Node ...

  8. C++有关类的符号总结

    因为我先学习的java,尽管c++与java在类声明与使用上很相似,但是看到c++的源码还是有一些符号不太明白..现在就用一个例子总结一下: #include <iostream> cla ...

  9. 版本控制工具git入门

    版本控制工具的历史 不说了,放张图 两者的区别:集中式需要一个中心服务器放置最新的文件,需要联网操作.分布式可以再不联网的情况下操作,前提要拥有版本库 git安装  略 github注册 略 如何在g ...

  10. Bootstrap 轮播（Carousel）插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...