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

随机推荐

nginx 工作原理总结
1. Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(locat ...
C语言程序设计II—第十一周教学
第十一周教学总结(6/5-12/5) 教学内容本周的教学内容为:10.1 知识点:多个函数构成的程序结构.10.2 递归函数.10.3编译预处理概念,包括文件.宏的内容.10.4 多文件模块的学生信 ...
java23种设计模式之九: 抽象工厂方法模式
一.抽象工厂定义上一讲我们说了一下工厂方法,那么我们如何对工厂进行抽象. 因为工厂是生产产品的,现在我们需要工厂抽象,只生产抽象产品,不生产具体的产品,这同时也体现了java的多态. 现在有2个抽象 ...
selenium之定位详篇
一.Web定位方法(find_elements返回元素list) 1.id: find_element_by_id() # find_element_by_id("id") fi ...
WEBservice的浏览器及元素的常用函数及变量整理总结（selenium ）
由于网页自动化要操作浏览器以及浏览器页面元素,这里笔者就将浏览器及页面元素常用的函数及变量整理总结一下,以供读者在编写网页自动化测试时查阅. from selenium import webdrive ...
python学习-39 生成器总结
总结 1.语法上和函数类似:生成器函数和常规函数几乎是一样的.它们都是使用def语句进行定义,差别在于,生成器使用yield语句返回一个值,常规函数使用return语句返回一个值. 2.自动实现迭代器 ...
PAT（B）1015 德才论（C）
题目链接:1015 德才论 (25 point(s)) 分析由题意可知,需要将考生按照分数进行一个分类(级),然后在每一级中按照分数排序.输入的时候将每个人的总分,等级和录取人数先算出来.然后按照自 ...
前端 aes 加密
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
基于【 centos7】一 || 安装ELK
一.安装jdk 上传安装包并解压:tar -zxvf ... 配置环境变量: 在配置文件中添加如下配置信息:vi /etc/profile export JAVA_HOME=/usr/local/jd ...
[书籍翻译] 《JavaScript并发编程》第四章使用Generators实现惰性计算
本文是我翻译<JavaScript Concurrency>书籍的第四章使用Generators实现惰性计算,该书主要以Promises.Generator.Web workers等技术 ...

canvas制图学习

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

随机推荐

热门专题