<!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. Ubuntu 12.04 搭建 SAMBA-SWAT（Samba Web 管理工具）

    参考了:http://linux.chinaunix.net/techdoc/net/2007/03/14/952274.shtml,对其进行了部分修改完善. 依次执行 1.sudo apt-get ...

  2. 案例42-使用ajax获取crm中的客户列表

    1webcontent部分 1 修改menu.jsp代码 2 jsp/customer/list.jsp代码 <%@ page language="java" content ...

  3. GridView, ListView 区别

    ListView, GridView部分的类层次结构 AbsListView的xml属性 android:listSelector 当前item高亮时,显示的drawable android:draw ...

  4. ubuntu安装卸载软件

    sudo apt-get remove nagios3 #卸载软件 sudo apt-get autoremove #卸载依附软件包 rpm格式 安装:rpm -ivh *** 查看:rpm -q * ...

  5. 【SoapUI】http接口测试

    一.接口介绍 API(Application Programming Interface,应用程序编程接口) 1.硬件接口 USB接口 硬盘接口 SD卡接口 LAN口和WAN口 CONSOLE口 .. ...

  6. DOM的概念和简单应用：使用DOM解析XML数据

    概念:DOM是Document Object Model的简称,即文档数据模型. Oracle公司提供了JAXP(Java API for XML Processing)来解析XML.JAXP会把XM ...

  7. 设备信息工具pv-jd快速上手

    pv-jd 这是一个判断设备信息的小工具,可以判断出移动端还是PC端,提供了多种API 快速开始 安装npm install pv-jd -S 示例 import {judgeDevice, judg ...

  8. es6新语法的使用

    1.声明变量: let 声明变量 作用域代码块作用域{} 尽在模块 先使用后声明 会报错 { let a= 12; alert(a) } let 不允许重复声明同一个变量 const 声明是一个常量, ...

  9. css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...

  10. java web的安全约束--表单的验证

    例子,表单和JDBCRealm的安全验证 参考了一篇文章http://www.cnblogs.com/dyllove98/archive/2013/07/31/3228698.html 1.要在wab ...