文章
html5 Canvas画图11:椭圆形(贝塞尔曲线)
canvas快速绘制圆形、三角形、矩形、多边形 - luckykun - 博客园非常推荐
Canvas中的save方法和restore方法推荐
这篇文章用到了translate,rotate,再次说一下translate,rotate,scale改变的是坐标轴,对当前状态没影响
beginPath开启新的(独立)路径和closePath自动闭合(三角形闭合),没有对应的关系,不是一个东西
-> 浅谈HTML5中canvas中的beginPath()和closePath()
独立路径:
rect() 不是独立路径,样式会被覆盖
/*绘制矩形路径 不是独立路径*/
/*ctx.rect(100,100,200,100);
ctx.fillStyle = 'green';
ctx.stroke();
ctx.fill();*/
/*绘制矩形 有自己的独立路径 (相当于开启beginPath())*/
//ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);
/*清除矩形的内容*/
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
渐变
可以使用一个渐变的方案了填充矩形(类似于CSS3)
渐变是有长度的
/*x0y0 起始点 x1y1 结束点 确定长度和方向*/
var linearGradient = ctx.createLinearGradient(100,100,500,400);
linearGradient.addColorStop(0,'pink');
// linearGradient.addColorStop(0.3,'red');
linearGradient.addColorStop(1,'blue');
ctx.fillStyle = linearGradient;
ctx.fillRect(100,100,400,100);
/*pink---->blue*/
/*回想线性渐变---->要素 方向 起始颜色 结束颜色 */
/*通过两个点的坐标可以控制 渐变方向*/
理解曲线是怎么来的(数学公式)
/*1.体验曲线的绘制*/
/*2.线是由点构成的*/
/*3.曲线可以由数学公式得来*/
/*公式:y = x/2 */
/*公式:y = (x + 2) ^2 */
/*公式:y = sin(x) */
for(var i = 1 ; i < 600 ; i ++){
var x = i;
//var y = x/2;
//var y = Math.pow(x/10-30,2);
var y = 50*Math.sin(x/10) + 100;
ctx.lineTo(x,y);
}
ctx.stroke();
arc圆
圆的右边是0/2PI弧度是固定的,就是说每个角度都是固定的..
弧度可以是负数
画空心/填充扇形(注意要确定圆心)
// 没有圆心会变成弓形
/*在中心位置画一个半径150px的圆弧右上角 扇形 边 填充 */
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*把起点放到圆心位置*/
ctx.moveTo(w/2,h/2);
ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);
/*闭合路径*/
// ctx.closePath();
// ctx.stroke()
ctx.fill();
绘制文本
// 获取文本的宽度 ctx.measureText(str).width
/*
基于起点左边对齐
*/
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/*1.在画布的中心绘制一段文字*/
/*2.申明一段文字*/
var str = '您吃-,了吗';
/*3.确定画布的中心*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*4.画一个十字架在画布的中心*/
ctx.beginPath();
ctx.moveTo(0, h / 2 - 0.5);
ctx.lineTo(w, h / 2 - 0.5);
ctx.moveTo(w / 2 - 0.5, 0);
ctx.lineTo(w / 2 - 0.5, h);
ctx.strokeStyle = '#eee';
ctx.stroke();
/*5.绘制文本*/
ctx.beginPath();
ctx.strokeStyle = '#000';
var x0 = w/2;
var y0 = h/2;
/*注意:起点位置在文字的左下角*/
/*有文本的属性 尺寸 字体 左右对齐方式 垂直对齐的方式*/
ctx.font = '40px Microsoft YaHei';
/*左右对齐方式 (center left right start end) 基准起始坐标*/
ctx.textAlign = 'center';
/*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
ctx.textBaseline = 'middle';
// ctx.direction = 'rtl';
// ctx.strokeText(str,x0,y0);
ctx.fillText(str,x0,y0);
/*6.画一个下划线和文字一样长*/
ctx.beginPath();
/*获取文本的宽度*/
console.log(ctx.measureText(str));
var width = ctx.measureText(str).width;
ctx.moveTo(x0-width/2,y0 + 20);
ctx.lineTo(x0+width/2,y0 + 20);
ctx.stroke();
坐标的translate/scale/rotate
// 是坐标轴的移动
ctx.strokeRect(0,0,100,100)
ctx.translate(100,100);
ctx.strokeRect(0,0,100,100)
// 是坐标轴的缩放
ctx.scale(0.5,1)
ctx.strokeRect(100,100,200,200)
ctx.strokeRect(100,100,100,100)
// rotate 旋转中心是坐标原点
ctx.rotate(Math.PI/6);
ctx.strokeRect(50,50,100,100);
// 通过translate设置坐标的旋转中心
var startAngle = 0;
ctx.translate(150,150);
setInterval(function () {
startAngle += Math.PI/180;
ctx.rotate(startAngle);
ctx.strokeRect(-50,-50,100,100);
},500);
简单的获取随机颜色
var getRandomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
填充规则(非零环绕) 相加为0就不填充
应用:
//1.虚线旋转边框
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 偏移大小
var offset = 0;
// 绘制
var draw = function () {
context.clearRect(0,0, canvas.width, canvas.height);
context.setLineDash([8, 4]);
context.lineDashOffset = offset;
context.strokeRect(2, 2, 236, 116);
}
var run = function () {
offset += 0.5;
if (offset > 24) {
offset = 0;
}
draw();
// 继续绘制
requestAnimationFrame(run);
}
run();
//发散 (感觉还挺好看的...本来是画坐标轴的)
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
let gridSize = 10
var canvasHeight = ctx.canvas.height;
var canvasWidth = ctx.canvas.width;
var xLineTotal = Math.floor(canvasHeight / gridSize);
for (let i = 0; i <= xLineTotal; i++) {
ctx.beginPath();
ctx.moveTo(0, i * gridSize - 0.5)
ctx.lineTo(canvasWidth, 10 - 0.5)
ctx.stroke()
}