<!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. SQL Server调优系列基础篇 - 并行运算总结(一)

    前言 上三篇文章我们介绍了查看查询计划的方式,以及一些常用的连接运算符.联合运算符的优化技巧. 本篇我们分析SQL Server的并行运算,作为多核计算机盛行的今天,SQL Server也会适时调整自 ...

  2. UVA 11991 Easy Problem from Rujia Liu?（vector map）

    Easy Problem from Rujia Liu? Though Rujia Liu usually sets hard problems for contests (for example, ...

  3. QT 自定义assert

    预览 代码 #define assert_(expression,message) if (expression) \ { \ if (QMessageBox::Yes == QMessageBoxE ...

  4. 关于C++对汉字拼音的处理(3)

    之所以汉字转拼音的博文能出到3,主要是因为没有很完美的C++的解决方案,但是写到了这里可以有一个小结了. 以前的方法都有这种那种弊端,如果出现了无法识别的汉字(简体的)就无法修改处理了,但是下面的这种 ...

  5. 绑定本地Service并与之通信

    绑定Service需要调用 public boolean bindService (Intent service, ServiceConnection conn, int flags): 传入一个Se ...

  6. ubuntu 12.04 mysql转移目录后 无法 启动

    http://www.boyunjian.com/do/article/snapshot.do?uid=com.iteye.xgbjmxn%2Fblog%2F1208086(转,)     我是用ap ...

  7. css中 中文字体（font-family）的标准英文名称

    Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro ...

  8. node 通过mongoose实现 mongodb的增删改

    node 通过mongoose实现 mongodb的增删改   新建文件test.js 内容如下:   var mongoose = require('mongoose') , Schema = mo ...

  9. MySQL字符串中数字排序的问题

    1.select * from table where 1   order by id*1 desc; 2.select * from table where 1 order by id+0 desc ...

  10. python学习笔记enumerate()与range(len)运用及赋值小计

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ #格式1 a = 'abc' for i in range(len(a)): print a[i],'(%d ...