Canvas绘图详解_技术笔记

Sandaydi 2019-02-27

总结：

HTML—创建一个画布：

<canvas id="canvas"></canvas>

JavaScript—

//创建绘图变量
var canvas = document.getElementById('canvas');
//获取绘图上下文环境
var context = canvas.getContext("2d");
//使用context进行绘制

canvas常用的属性：

canvas.width 
canvas.height 
canvas.getContext('2d')

canvas构成线条使用方法：

moveTo(x, y);
lineTo(x, y);

beginPath();
closePath();

canvas具体状态设置：

lineWidth — 线条
strokeStyle — 线条样式
fillStyle — 填充样式
stroke() — 函数 绘制边框
fill() — 函数 进行填充

简易函数—矩形

rect(x, y, width, height) — 绘制矩形边框路径
fillRect(x, y, width, height) — 具体填充矩形
strokeRect(x, y, width, height) — 绘制带有边框矩形

0赞 · 0采集

慕码人8705899 2019-01-18

本章小结：lineWidth strokeStyle fillStyle stroke fill

截图
0赞 · 0采集
qq_简单点_14 2017-09-14

var canves = document.getElementById('canves');//取得canves对象 canves属性： canves.width=800;//设置canves的宽 canves.height=600;//设置canves的高 var context = canves.getContext('2d');//取得canves的绘图上下文环境设置路径状态： context.moveTo(x,y); context.lineTo(x,y); context.beginPath();//路径开始 context.closePath();//路劲结束并且封闭路径设置样式： context.lineWidth=10;//设置线条宽度 context.strokeStyle="red";//设置线条的样式 context.fillStyle="blue";//设置填充样式开始绘制： context.stroke();//路径绘制函数 context.fill();//填充绘制函数矩形： context.rect(x,y,width,height);//设置矩形路径状态 context.fillRect(x,y,width,height);//矩形填充绘制函数 context.strokeRect(x,y,width,height);//矩形路劲绘制函数

0赞 · 0采集
醒醒醒醒 2017-08-18

绘制矩形的简易函数

截图
0赞 · 0采集
jlz 2017-06-30

canvas常用的几个属性、方法

截图
0赞 · 0采集
jlz 2017-06-30

canvas常用的几个属性、方法

0赞 · 0采集
芷1 2017-02-25

closePath()为闭合， beginPath()为不覆盖上一次绘制的图形从新绘制

0赞 · 1采集
慕粉4145174 2016-12-15

绘制矩形

截图
0赞 · 0采集
慕粉4145174 2016-12-15

绘制线条、填充

截图
0赞 · 0采集
慕粉4145174 2016-12-15

基于状态的绘制

截图
0赞 · 0采集
慕粉4145174 2016-12-15

设置画布宽、高，获取画布上下文环境

截图
0赞 · 0采集
blablabla 2016-10-17

context.beginPath();//路径开始,让各段路径不会相互干扰 context.closePath();//路劲结束并且封闭路径

0赞 · 1采集
tlx6550 2016-07-27

context.rect(x, y, width, height); //自动绘制矩形，规划路径 context.fillRect(x, y, width, height); //绘制填充矩形不但规划路径，还把矩形给画出来 context.strokeRect(x, y, width, height); //绘制带【边框的】矩形不但规划路径，还把矩形给画出来

截图
0赞 · 2采集
冷眼看尽繁华丿 2016-07-19

看截图

截图
0赞 · 0采集
Lywwwwwvvv 2016-05-24

简易函数矩形

截图
0赞 · 0采集
头像已舔屏 2016-03-29

绘制矩形的三种方式

截图
0赞 · 1采集
慕妹2970887 2016-03-13

rgba(0,256,256,0.8)是三个颜色加透明度值

0赞 · 1采集
一朵梨花压海棠的小虫周伯通 2016-03-13

三种绘制矩形的方式，rect(x,y,width,height)/fillRect(x,y,width,height)/strokeRect(x,y,width,height)

截图
0赞 · 0采集
一朵梨花压海棠的小虫周伯通 2016-03-13

canvas状态设置

截图
0赞 · 0采集
一朵梨花压海棠的小虫周伯通 2016-03-13

canvas基于状态的绘制

截图
0赞 · 0采集
一朵梨花压海棠的小虫周伯通 2016-03-13

canvas

截图
0赞 · 0采集
穆克网abc 2016-02-28

var canves = document.getElementById('canves');//取得canves对象 canves属性： canves.width=800;//设置canves的宽 canves.height=600;//设置canves的高 var context = canves.getContext('2d');//取得canves的绘图上下文环境设置路径状态： context.moveTo(x,y); context.lineTo(x,y); context.beginPath();//路径开始 context.closePath();//路劲结束并且封闭路径设置样式： context.lineWidth=10;//设置线条宽度 context.strokeStyle="red";//设置线条的样式 context.fillStyle="blue";//设置填充样式开始绘制： context.stroke();//路径绘制函数 context.fill();//填充绘制函数矩形： context.rect(x,y,width,height);//设置矩形路径状态 context.fillRect(x,y,width,height);//矩形填充绘制函数 context.strokeRect(x,y,width,height);//矩形路劲绘制函数

0赞 · 1采集
慕仙0369855 2016-02-23

本章小结 html <canvas id="canvas"></canvas> javascript var canvas=document.getElementById("canvas"); var txt=canvas.getContext("2d"); txt.moveTo() txt.lineTo() txt.beginPath() txt.closePath() txt.lineWidth=x; txt.fillStyle(); txt.strokeStyle(); txt.fill(); txt.stroke(); txt.rect(x,y,width,height); txt.fillRect(x,y,width,height); txt.strokeRect(x,y,width,height);

截图
0赞 · 0采集
倒骑毛驴 2016-01-08

canvas 绘制矩形rect fillRect(x,y,width,height) 填充矩形 strokeRect(x,y,width,height)描边矩形

截图
0赞 · 0采集
倒骑毛驴 2016-01-08

canvas绘图机制起点moveTo 线条长度lineTo 闭合路径beginPath() closePath()

截图
0赞 · 0采集
慕娘3670624 2016-01-08

canvas.width canvas.height canvas.getContext('2d');

0赞 · 0采集
多瑞秘法搜啦系多 2016-01-05

创建canves var canves = document.getElementById('canves') canves属性：width、height、getContext('2d') 绘图环境 var context = canves.getContext('2d') context设置属性 moveTo(x,y);lineTo(x,y); beginPath closePath开始路径的开始以及结束 lineWidth strokeStyle设置线条的样式 fillStyle设置填充样式 stroke fill rect(x,y,宽,高)

截图
0赞 · 0采集
geoffju 2015-10-10

lineWidth 线条宽度 strokeStyle 线条颜色 fillStyle 填充色 stroke() 绘制线条 fill() 绘制填充

截图
0赞 · 0采集
天外飞熊 2015-03-09

本章小结

截图
0赞 · 0采集
爱赵晓羊 2015-01-23

绘制矩形

截图
0赞 · 0采集

数据加载中...