<!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. 段错误：使用opencv打开视频流

    段错误:使用opencv打开视频流时报这个错误 1 使用命令dmesg 发现是libavutil.so模块发生了错误. 如果是java端报错,可能如下: libavutil.so  ... av_di ...

  2. GIT远程仓库的使用

    查看当前项目有哪些远程仓库 $ git remote bixiaopeng@bixiaopengtekiMacBook-Pro wirelessqa$ git remote origin 查看远程仓库 ...

  3. angular 首屏优化

    前一段时间把公司的一个angular项目做了一次大的优化,记录一下过程. 起因: 起因是用户反映网站加载时间过长,从loading画面显示到页面可响应要13s,对于一般的页面恐怕没有用户愿意等待这么久 ...

  4. 初学Hadoop之中文词频统计

    1.安装eclipse 准备 eclipse-dsl-luna-SR2-linux-gtk-x86_64.tar.gz 安装 1.解压文件. 2.创建图标. ln -s /opt/eclipse/ec ...

  5. ASP.NET生命周期详解（转）

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  6. C++里创建 Trie字典树（中文词典）（三）（联想）

    萌新做词典第三篇,做得不好,还请指正,谢谢大佬! 今天把词典的联想做好了,也是比较low的,还改了之前的查询.遍历等代码.  Orz 一样地先放上运行结果: test1 ID : char : 件 w ...

  7. Csharp:TinyMCE HTML Editor in .NET WindowsForms

    /// <summary> /// /// </summary> public partial class Form2 : Form { private mshtml.IHTM ...

  8. Vue element-ui：滚动条 分页 禁用选项

    1.滚动条设置: <el-scrollbar style="height:100%;">.......</el-scrollbar> 默认会同时出现水平和垂 ...

  9. node的版本控制之nvm的安装与使用

    NVM的安装 windows下的安装: windows下的离线安装: nvm 的windows下载地址:https://github.com/coreybutler/nvm-windows/relea ...

  10. ASP.NET MVC 音乐商店 - 6. 使用 DataAnnotations 进行模型验证

    在前面的创建专辑与编辑专辑的表单中存在一个问题:我们没有进行任何验证.字段的内容可以不输入,或者在价格的字段中输入一些字符,在执行程序的时候,这些错误会导致数据库保存过程中出现错误,我们将会看到来自数 ...