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

随机推荐

CentOS 7 安装wordpress
1.安装php 要安装php 7,必须使用下面的命令在Centos7系统上安装并启用epel和remi存储库. 输入一下代码, yum install http://rpms.remirepo.net ...
python 列表List - python基础入门(13)
列表是python开发过程中最常用的数据类型之一,列表俗称:list ,特点如下: 1.列表由一个或者多个数据构成,数据的类型可以不相同也可以相同: 2.列表中的数据需要写在[]中括号内部,数据与数据 ...
Linux基础重点习题讲解
第一章一个EXT4的文件分区,当时使用touch test.file命令创建一个新文件时报错,报错的信息是提示磁盘已满,但是采用df-h命令查看磁盘大小时,只使用了60%的磁盘空间,为什么会出现这 ...
vue+element-ui动态生成多级表头，并且将有相同字段下不同子元素合并为同一个
element表头要多层生成,下一级表头数据源必须是当前表头的子一级,这样一层一层嵌套可以生成多层表头: 要把数据处理成这种类型的数据 var arr = []; for (var key in ob ...
数据结构 -- 二叉树（Binary Search Tree）
一.简介在计算机科学中,二叉树是每个结点最多有两个子树的树结构.通常子树被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用于实现二叉查找树和二叉堆. ...
数据类型 _python
字符串 str # a ="asd bfg" # print(a.capitalize()) #首字母大写 # print(a.title()) #每个单词首字母大写 # prin ...
Python开发【杂货铺】：作用域的痛点
1.块级作用域想想此时运行下面的程序会有输出吗?执行会成功吗? #块级作用域 if 1 == 1: name = "lzl" print(name) for i in range ...
Scratch第四十九讲：完美的下落和反弹
做了很多小游戏,都会遇到碰撞和反弹的情况,CC哥大多时候也都是简单处理一下,包括之前的讲座也有提过,但是没有认真的讲解过.今天就专门为这个主题做一讲,把这部分内容彻底讲透,大家可以一起探讨一下. 是不 ...
MySQL NULL 使用带来的坑
MySQL 基础篇三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列列转行 M ...
（十一）SpringBoot之文件上传以及
一.案例 1.1 配置application.properties #主配置文件,配置了这个会优先读取里面的属性覆盖主配置文件的属性 spring.profiles.active=dev server ...

canvas制图学习

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

随机推荐

热门专题