<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>canvas</title>

     <style>

         body{

             margin:0;padding:0;

         }

     </style>

 </head>

 <body>

     <canvas id="myCanvas" width="1080px" height="520px" style="border:1px dashed #000;" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()">你的浏览器不支持HTML5</canvas>

     <div id="texts"></div>

 </body>

 <script type="text/javascript">

     //获取鼠标在canvas画布上的坐标，浏览器窗口左上角为原点

     function getCoordinates(e){

         var x = e.clientX;

         var y = e.clientY;

         document.getElementById("texts").innerHTML = "Coordinates:("+ x +","+y+")";

     }

     function clearCoordinates(){

         document.getElementById("texts").innerHTML = "";

     }

     var c = document.getElementById("myCanvas");

     var cxt = c.getContext("2d");

     //画一个宽100px，高150px的矩形

     cxt.beginPath();

     cxt.rect(0,0,100,150);

     cxt.fillStyle="#ff0000";

     cxt.fill();

     cxt.closePath();

     //画一个三角形

     cxt.beginPath();

     cxt.moveTo(110,0);

     cxt.lineTo(210,150);

     cxt.lineTo(110,150);

     cxt.lineTo(110,0);

     cxt.stroke();

     cxt.closePath();

     //画一个半圆

     cxt.beginPath();

     cxt.arc(300,100,50,Math.PI,Math.PI*2,true);

     cxt.fillStyle = "#00ff00";

     cxt.fill();

     cxt.closePath();

     //渐变

 　　详见HTML5 Canvas进阶（一）：渐变，透明，移动，旋转，缩放

 /*

     cxt.beginPath();

     cxt.arc(75,75,50,0,Math.PI*2,true); // 绘制

     cxt.moveTo(110,75);

     cxt.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)

     cxt.moveTo(65,65);

     cxt.arc(60,65,5,0,Math.PI*2,true);  // 左眼

     cxt.moveTo(95,65);

     cxt.arc(90,65,5,0,Math.PI*2,true);  // 右眼

     cxt.stroke();

 */

     // 二次贝尔赛曲线

     cxt.beginPath();

     cxt.moveTo(400,75);

     cxt.quadraticCurveTo(400,50,450,50);

     cxt.quadraticCurveTo(500,50,500,75);

     cxt.quadraticCurveTo(500,100,450,100);

     cxt.quadraticCurveTo(450,125,415,125);

     cxt.quadraticCurveTo(435,125,435,100);

     cxt.quadraticCurveTo(400,100,400,75);

     cxt.stroke();

     cxt.closePath();

 /*    // 封装的一个用于绘制圆角矩形的函数.

     function roundedRect(ctx,x,y,width,height,radius){

         cxt.beginPath();

         cxt.moveTo(x,y+radius);

         cxt.lineTo(x,y+height-radius);

         cxt.quadraticCurveTo(x,y+height,x+radius,y+height);

         cxt.lineTo(x+width-radius,y+height);

         cxt.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);

         cxt.lineTo(x+width,y+radius);

         cxt.quadraticCurveTo(x+width,y,x+width-radius,y);

         cxt.lineTo(x+radius,y);

         cxt.quadraticCurveTo(x,y,x,y+radius);

         cxt.stroke();

     }*/

 </script>

 </html>

canvas基本图形的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  3. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  4. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

  5. canvas给图形添加颜色

    canvas给图形添加颜色 合法属性 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 16 ...

  6. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  7. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  8. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  10. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

随机推荐

  1. kpw2使用心得

    一:截屏 只需要同时按下对角线的两个点(比如左下角,右上角)就可以,图片可以通过数据线连接到电脑,在根目录下就可以查看截屏图片. 二:拖曳电子书pdf 可以通过数据线连接,找到kpw2的磁盘,将pdf ...

  2. 如何在DIV内只要垂直滚动条，不要水平滚动条

    <DIV style="OVERFLOW-Y: scroll; OVERFLOW-X:hidden; width: 685px; height: 180px">< ...

  3. JS代码格式化排版工具,web文本编辑器

    js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...

  4. angular 兼容IE浏览器

    安装classlist.babel-polyfill: npm install --save classlist.js npm install --save babel-polyfill 修改 src ...

  5. FZU 2221—— RunningMan——————【线性规划】

     Problem 2221 RunningMan Accept: 17    Submit: 52Time Limit: 1000 mSec    Memory Limit : 32768 KB  P ...

  6. 【Linux相识相知】任务计划和周期性任务

    在我们的生活中,有的工作是例行的,例如每年一次加薪.每年给女朋友过一次生日.每天上班都要打卡等,有的工作是临时发生的,例如明天朋友要来访,你需要准备午餐等等. 像很多例行的工作,你一旦忙起来就很容易忘 ...

  7. Sql批处理语句

    同时写3个批处理,如果前2个批处理没有问题,最后一个有错误那么3个批处理都不会执行需要注意列如: use Materl GO select * from t_icitem GO inset into ...

  8. 【学习笔记】实用类String的基本应用即常用方法

    一.String类概述 在Java中,字符串被作为String类型的对象来处理. String类位于java.lang包中,默认情况下会自动导入到所有的程序中. 创建String对象的方法如下: St ...

  9. 快速排序——Java实现

    一.排序思想 快速排序是由冒泡排序改进而得到的,是一种分区交换排序方法.思想如下:一趟快速排序采用从两头向中间扫描的方法,同时交换与基准记录逆序的记录. 在待排序的N个记录中任取一个元素(通常取第一个 ...

  10. 【代码笔记】Java基础：Java的方法和类

    面向过程与面向对象都是我们编程中,编写程序的一种思维方式.例如:公司打扫卫生(擦玻璃.扫地.拖地.倒垃圾等), 按照面向过程的程序设计方式会思考“打扫卫生我该怎么做,然后一件件的完成”,最后把公司卫生 ...