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> & ...

随机推荐

zookeper集群
1.vi zoo.cfg server.1= ip:2777:3777 server.2= ip:2888:3888 server.3= ip:2999:3999 开启防火墙端口 2.创建myid文件 ...
(转)图解SSH原理
图解SSH原理原文:https://www.jianshu.com/p/33461b619d53 http://blog.51cto.com/forlinux/1352900---------SSH ...
poj 1080 ——Human Gene Functions——————【最长公共子序列变型题】
Human Gene Functions Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 17805 Accepted: ...
win10 MySQL8.0 zip包安装及问题解决
1.在官网下载zip包 https://dev.mysql.com/downloads/mysql/ 2.将zip包解压到自己的工作目录中 3.配置环境变量 1)添加环境变量 MYSQL_HOME E ...
MySQL的知识回顾
经过一段时间的NodeJs开发经历,选用的数据库是MySQL,一开始以为自己对数据库的基础知识掌握还ok,因为毕竟自己以前用过Apache+PHP+MySQL做数据库课程设计,但是在开发过程中才知道在 ...
Swiper双向轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
超简便的ListView中Adapter的写法
对于 ListView 的使用,他有两个重点的部分,一个是下拉刷新和加载更多,这个今天我们不讲,另外一个是 BaseAdapter 的使用,这个是今天的主角,BaseAdapter 中又有 ViewH ...
Python学习系列----第五章模块
5.1 如何引入模块在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入.在调用math模块中的函数时,必须这样引用: ...
Windows C/C++ 内存泄露检测
#pragma once #define _CRTDBG_MAP_ALLOC #include<crtdbg.h> #include<stdlib.h> #include< ...
sqlserver broker远端端点证书认证
1:采用windows验证的方法: CREATE ENDPOINT InstInitiatorEndpoint STATE = STARTED AS TCP ( LISTENER_PORT = ) F ...

canvas基本图形

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

随机推荐

热门专题