canvas基本图形

 <!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基本图形的更多相关文章

html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
canvas基础—图形变换
1.canvas转换方法 1.1canvas转换方法二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...
canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
canvas给图形添加颜色
canvas给图形添加颜色合法属性 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 16 ...
HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

随机推荐

Android 中判断网络状态
首先在AndroidManifest.xml添加权限 <uses-permission android:name="android.permission.ACCESS_NETWORK_ ...
（转）Python格式化字符 %s %d %f
Python格式化字符 %s %d %f 原文:http://blog.csdn.net/huangfu77/article/details/54807835 格式描述%% 百分号标记 #就是输出一 ...
Eclipse的企业开发时常用快捷键使用、优化配置（博主推荐）
不多说,直接上干货! 一.简介 eclipse可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为什么使用它 ...
TOJ 1883 Domino Effect
Description Did you know that you can use domino bones for other things besides playing Dominoes? Ta ...
【算法】K-Means聚类算法（k-平均或k-均值）
1.聚类算法和分类算法的区别 a)分类分类(Categorization or Classification)就是按照某种标准给对象贴标签(label),再根据标签来区分归类. 举例: 假如你有一堆 ...
NSTimer循环引用的问题
前言: 记得之前看过一个面试题问:ARC环境下的dealloc方法有什么用?问题解答是:代理指针置空,停止定时器timer,注销通知,释放掉实例变量.看着没什么问题,而且网上一收也是大概这样的答案.今 ...
SQLite 大小写敏感
--转自mojianpo http://mojianpo.iteye.com/blog/1496579 大部分数据库在进行字符串比较的时候,对大小写是不敏感的. 但是,在SQLite中,对大小写是敏 ...
django细节
1.处理请求 1.1 /add/?a=4&b=5 这样GET方法进行[获取参数] from django.shortcuts import render from django.http i ...
Maven学习篇一：依赖了解
1.依赖配置 <project> ... <dependencies> <dependency> <groupId>xx</groupId> ...
jQuery plugin: Tablesorter 2.0
http://mottie.github.io/tablesorter/docs/example-pager.htmlhttp://tablesorter.com/docs/example-pager ...

canvas基本图形

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

随机推荐

热门专题