canvas制图学习

<!DOCTYPE html>

<head>

<title>canvas练习</title>

<style>

body{

margin: 0px;

}

canvas{

background: #e2dddc;

}

</style>

</head>

<body>

//固定语法，定义变量，设置绘制环境

var canvas=document.getElementById('canvas');//获取canvas动画的id值，单引号

var context=canvas.getContext('2d');//2d需小写。单引号

//绘制直线

context.lineWidth=5;//设置线的宽度

context.strokeStyle="#156fff";//绘制的样式，颜色，渐变等

context.moveTo(0,0);//设置起点

context.lineTo(200,0);//设置终点

context.stroke();//开始绘制

//可以通过四条直线，但是绘制矩形，会有小缺角

context.beginPath();

context.moveTo(20,20);

context.lineTo(80,20);

context.lineTo(80,80);

context.lineTo(20,80);

// context.lineTo(20,20);//通过绘制四条边，但是在有的浏览器会有小缺角

context.closePath();//可通过closepath闭合图形，与上面最后一条分开

context.stroke();

//矩形绘制通过rect方法

context.beginPath();//重新绘制图形，需要从新定义起点

context.strokeStyle="#696922";//可重新定义样式。。。

context.rect(20,90,50,50);//x,y,w,h的值xy起点，wh矩形的宽高

context.stroke();//开始绘制

//j将rect()和stroke()方法合并

context.beginPath();

context.strokeStyle="#aaaaaa";

context.strokeRect(20,150,50,50);//方法合并绘制矩形

//fillStroke()绘制填充图形

context.beginPath();

context.fillStyle="#EEAEEA";//fillStyle方法类似strokestyle，改变样式

context.fillRect(20,210,50,50);//绘制填充图。默认黑色

/*********************************注意圆弧角度的对比****************************************/

//绘制圆弧arc(x,y,r,开始角度，结束角度，true/false),角度按照弧度Math.PI写，True设置逆时针绘制，false顺时针

context.beginPath();

context.arc(150,50,30,0,Math.PI/3,true);//默认false，顺时针，最后一个参数可以省略

context.stroke();

//绘制圆弧arc(x,y,r,开始角度，结束角度，true/false),角度按照弧度Math.PI写，True设置逆时针绘制，false顺时针

context.beginPath();

context.arc(150,120,30,0,Math.PI/3,false);//默认false，顺时针，最后一个参数可以省略

context.stroke();

/*********************************结束***************************************************/

//绘制圆

context.beginPath();

context.fillStyle="#ff3c00"

context.arc(150,190,30,0,Math.PI*2,true);//默认false，顺时针，最后一个参数可以省略

context.fill();//绘制圆填充

context.stroke();//圆形加外框

//不完整圆

context.beginPath();

context.lineWidth=5;

context.arc(150,260,30,0,Math.PI/3,true);//默认false，顺时针，最后一个参数可以省略

context.closePath();//闭合圆外框，

context.fill();//绘制圆填充

context.stroke();

//绘制扇形

context.beginPath();

context.moveTo(250,50);//起点

context.arc(250,50,30,Math.PI*7/6,Math.PI*11/6,false);

context.closePath(); //闭合

context.stroke();

context.fill();

//用fill绘制扇形,两个扇形，通过扇形覆盖完成，但是有细边存在

context.beginPath();

context.fillStyle = "coral";

context.moveTo(600, 200);

context.arc(600, 200, 200, Math.PI * 7 / 6, Math.PI * 11 / 6);

context.closePath();

context.fill();

context.beginPath();

context.fillStyle = "#e2dddc";

context.moveTo(600, 200);

context.arc(600, 200, 100, Math.PI * 7 / 6, Math.PI * 11 / 6);

context.closePath();

context.fill()

//用stroke绘制扇形，直接设置线宽

context.beginPath();

context.strokeStyle = "coral";

context.lineWidth = 100;

context.arc(1000, 200, 150, Math.PI * 11 / 6, Math.PI * 7 / 6, true);

context.stroke();

//汉字添加

context.beginPath();

context.strokeStyle = "coral";

context.lineWidth = 100;

context.arc(200,500,150,Math.PI * 11 / 6, Math.PI * 7 / 6,true);

context.stroke();

context.beginPath();

context.fillStyle="red";

context.strokeStyle="green";

context.font="bold 20px Arial";

context.lineWidth=1;//一定要设置绘制字的宽度,未重新定义宽度，则使用上面定义的宽度，会导致汉字混乱

context.strokeText("纵",180,350);

context.fillText("横",180,390);

//线性渐变色createLinearCradient()

context.beginPath();

g=context.createLinearGradient(50,650,350,600);//注意大小写.计算线性起点和终点

g.addColorStop(0,"#f00a0a");

g.addColorStop(0.4,"#cbce12");

g.addColorStop(0.8,"#1244ce");

g.addColorStop(1,"#a212ce");

context.strokeStyle = g;

context.lineWidth = 100;

context.arc(200,800,150,Math.PI * 11 / 6, Math.PI * 7 / 6,true);

　　 context.stroke();

/*****************************************太极图*******************************************/

//canvas绘制太极图,先stroke圆圈，在绘制左右黑白半圆，填充黑白大圆，加入黑白中心小圆

context.beginPath();

context.lineWidth=1;

context.strokeStyle="#000000";

context.arc(600,610,200,0,2*Math.PI);

context.stroke();

context.closePath();

//左边的大黑半圆

context.beginPath();

context.fillStyle="#000000";

context.arc(600,610,200,0.5*Math.PI,1.5*Math.PI);

context.fill();

context.closePath();

//右边的大白半圆

context.beginPath();

context.fillStyle="#ffffff";

context.arc(600,610,200,0.5*Math.PI,1.5*Math.PI,true);

context.fill();

context.closePath();

//上面的左边半圆

context.beginPath();

context.arc(600,510,100,0.5*Math.PI,1.5*Math.PI);

context.fillStyle="white";

context.fill();

context.closePath();

//上面的小黑圆

context.beginPath();

context.arc(600,510,33,0,2*Math.PI);

context.fillStyle="black";

context.fill();

context.closePath();

//下面的右边半黑圆

context.beginPath();

context.arc(600,710,100,Math.PI,(3/2*Math.PI),true);

context.fill();

context.closePath();

//下面的小白圆

context.beginPath();

context.arc(600,710,33,0,2*Math.PI);

context.fillStyle="white";

context.fill();

context.closePath();

/*****************************************结束*********************************************/

</script>

</body>

</html>

canvas制图学习的更多相关文章

canvas的学习
canvas的学习一. //获取画布 var mycanvasEle = document.getElementById("mycanvas");二. //内容 var ctx ...
HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形创建一个画布( ...
canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
canvas基础学习（四）
今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...
canvas基础学习（二）
一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...
canvas 的学习
canvas 绘制直线的API有: 1.moveTo()起点坐标. 2.lineTo()绘制的直线 3. fillStyle以及 flii()是绘制实体的 4. strokeStyle 和stroke ...
Canvas基础学习（一）——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...
HTML5 CANVAS制图基础总结
一.基本绘图首先,定义2D渲染变量ct(这里用了Jquery库): var ct = $(#canvasId).get(0).getContext('2d'); 以下是绘制各种基本图形的方法: // ...
Canvas 绘图学习笔记2
1 绘制文本 fillText(string,x,y,maxWidth) //填充试绘制文本 strokeText(string,x,y,maxWidth) 画线试绘制文本设置字体样式: cont ...

随机推荐

ab webbench 网站测压解决
ab 网站测压解决 ab –c 100 –n 100 http://192.168.1.117/forum.php (测试方式) 同时发100人发100个请求 ab –c 100 –n 1000 ht ...
websocket抓包
https://www.cnblogs.com/xiaoniuzai/p/7588739.html http://blog.sina.com.cn/s/blog_12df1b9e60102vyeq.h ...
[数据结构] - ArrayList探究
一概述 ArrayList可以理解为动态数组,与java的数组相比,它的容量能动态曾长,ArrayList是List接口的可变数组的实现,允许包括null值在内的所有元素.除了实现List接口外,此 ...
数据结构 -- Trie字典树
简介字典树:又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 优点:利用字符串的公共前缀来减少查询时间,最大限度地减少无谓的字符串比较,查询效率比哈希树高. 性质: 1. 根节 ...
C++:标准模板库Sort
一.概述 STL几乎封装了所用的数据结构中的算法,这里主要介绍排序算法的使用,指定排序迭代器区间后,即可实现排序功能. 所需头文件#include <algorithm> sort函数:对 ...
Intellij IDEA中启动多个微服务--开启Run Dashboard管理
1.找到workspace.xml 2.添加配置 <option name="configurationTypes"> <set> <option v ...
Ubuntu Server 18.04 无法修改 hostname
对于运维而言,我们希望每台服务器的 hostname 都能体现出它自己的功能/ip,方便排查. ubuntu server live 18.04 的安装流程非常友好,从 ip 到 hostname 都 ...
Spring邮件服务：Maven + Spring SMTP Mail (可发送附件)
1 spring-smtp-mail.xml <?xml version="1.0" encoding="UTF-8"?> <beans x ...
poj 2406 求最短重复字串
题解: KMP中next数组的巧妙运用.在这里我们假设这个字符串的长度是len,那么如果len可以被len-next[len]整除的话,我们就可以说len-next[len]就是那个最短子串的长度为什 ...
（二）Lucene之根据关键字搜索文件
前提:在使用lucene进行搜索的时候,必须先生成索引文件,即必须先进行上一章节的案例,生成索引文件如下: 该索引文件为"segments"开头,如果没有该文件则说明没有索引文件则 ...

canvas制图学习

canvas制图学习的更多相关文章

随机推荐

热门专题