<!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. 零基础Visual Fox Pro 6.0自学笔记（VFP6.0图文教程）

    序:有个哥们读大一,学的金融,由于考试需要去学VFP.拜托我帮忙找教程,发觉网上没有合适的,教学视频多半要收费,优秀文档很少.微软官方也不重视VFP了,真可惜.遂生出写一个入门教程的想法.图文并茂的可 ...

  2. 从零基础到App Store

  3. iOS－开发日志－UITextView介绍

    UITextView 属性 1.     text: 设置textView中文本 _textView.text = @"Now is the time for all good develo ...

  4. 操作系统之进程篇(4)--经典进程间通信(IPC)问题

    1. 哲学家进餐问题: 问题描述: 五个哲学家在一个圆桌上进餐,每人的面前放了一盘意大利面,两个盘子之间有一个叉子,但是由于盘子里面的面条十分光滑,需要两个叉子才能进行就餐行为.餐桌的布局如下图所示: ...

  5. zabbix 配置

    终于把zabbix配置好了.可能还有待优化   我主要参考了几个链接 http://lnmp.org/install.html   一键安装lnmp http://blog.unix178.com/2 ...

  6. nodejs -formidable模块实现图片上传。

    var form = new formidable.IncomingForm(); form.uploadDir="/localnonobank/test/images/";   ...

  7. PL/SQL学习（六）触发器

    原文参考:http://plsql-tutorial.com/ 创建语法: CREATE [OR REPLACE ] TRIGGER trigger_name {BEFORE | AFTER | IN ...

  8. 使用Chrome DevTools的Timeline分析页面性能

    随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...

  9. c#指针用法示例。

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  10. 在windows下的mysql使用

    具体可参照http://jingyan.baidu.com/article/3aed632e19b5e8701080918f.html 1.安装mysql. 直接百度搜索mysql下载.