canvas

最新推荐文章于 2024-08-12 17:44:32 发布
最新推荐文章于 2024-08-12 17:44:32 发布
阅读量272 收藏 1
点赞数
分类专栏： JavaScript基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gklcsdn/article/details/109249142
版权

Canvas

一.概述

Canvas是HTML5中非常重要的一个更新亮点，画布，替代Flash的！制作动画、制作游戏。渲染效率非常的高，浏览器不需要安装任何的插件就可以渲染这个动画

1. Hello World

canvas是一个标签，有一个默认的宽高（300px,150px）。如果我们要设置宽度、高度，必须设置在HTML标签上面，而不能设置在CSS上。

我们必须使用JavaScript来控制Canvas渲染各种东西：

<style type="text/css">
    canvas{
        border: 1px solid gray;
    }
</style>

<canvas width="600" height="400"></canvas>

<script type="text/javascript">
    //使用DOM方法得到画布
    var mycanvas = document.querySelector("canvas");
    //使用画布的上下文,获取绘画功能对象,就像拿到一直画笔,这支画笔只在当前画笔有效
    var ctx = mycanvas.getContext("2d");
    //画各种东西，用ctx打点调用方法，而不是mycanvas
    ctx.fillRect(100,100,300,40);
   
</script>
2. 涉及的API
2.1 getContext()

get表示得到，context是上下文的意思。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var ctx = canvas.getContext('2d');

ctx对象，非常重要所有的绘制都是ctx的方法。canvas就是画布,功能就是生产画笔,

剩下所有的绘制都是有这支画笔ctx对象的属性来操作

//也就是说所有的绘制API都是ctx的事情，而不是canvas对象
ctx.fillStyle = "blue";
ctx.arc(300,300,100,0,Math.PI * 2,true);
ctx.fill();
2.2 绘制圆形 arc()

绘制圆形 arc(x,y,r,)

bol,是布尔值

ctx.arc(300,300,100,0,Math.PI * 2,true);  // 圆心坐标，半径，起始位置，终点位置，顺时针
  1. x,y为圆心的坐标
  2. radius 为圆形的半径
  3. startAngle 为弧度的起始位置,0是正x轴的
  4. endAngle 为弧度的终点位置,
  5. anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制
2.3 绘制矩形 rect()

绘制矩形 rect(x,y,w,h)

ctx.rect(200, 200, 100, 100);  // 左上角位置   ，  长宽
2.4 stroke()笔触

绘制线条

ctx.stroke()
2.5 fill() 填充
ctx.fill()
2.6 可以合在一起写

  1. strokeRect(x,y,w,h)

  2. fillRect(x,y,w,h)

    参数:

    ​ x,y 为起点的x,y坐标

    ​ w,h 为要绘制矩形的宽高

2.7 清除 clearRect()

清除clearRect(x,y,w,h)

ctx.clearRect(250, 250, 30, 30);

清除在绘制有先后属性之分

二. 笔触和填充

Canvas中能够产生颜色的是两个东西，一个叫做笔触（也叫做描边），一个叫做填充。

1. 笔触（描边） strokeRect(x,y,w,h)

参数,x,y 左上角起点坐标,w,h为绘制矩形的宽高

1.1 笔触的使用:
//笔触
ctx.strokeRect(100,100,300,40);

你会发现只有描边没有填充色

fillRect() API绘制的矩形是有填充色的

1.2 设置笔触的颜色
// 设置笔触颜色
ctx.strokeStyle = 'red';

// 绘制笔触矩形
ctx.strokeRect(100,100,300,50);

此时你就会发现你绘制的是一个没有填充色，只有红色边框的矩形

1.3 绘制笔触的宽度
ctx.lineWidth = 20;   // 设置笔触的宽为20
1.4 笔触绘制线段

moveTo() 绘制开始位置 lineTo() 画笔移动的下一个wezhi

ctx.moveTo(100,100);  	//将画笔移动到一个位置(先移动到开始点的位置)
ctx.lineTo(300,300);  	//用画笔画，此时是抽象的一个线，没有显示在画布上(下一个点的位置)
ctx.stroke();			//划线(告诉浏览器,我说完了,你画吧)

我们可以多次使用lineTo：

告诉浏览器下一个点的位置,来绘制相邻点之间的线段

ctx.moveTo(100,100);  	// 将画笔移动到一个位置
ctx.lineTo(300,300);  	// 准备绘制从开始点到这个点的线，

ctx.lineTo(300,200);	// 准备绘制从上一个点到这个点的线，
ctx.lineTo(430,180);	// 准备绘制从上一个点到这个点的线，

ctx.stroke();	        // 正式开始划线
1.5 闭合路径

而且我们还可以使用closePath() ,来闭合路径

就是浏览器会自动的在开始点moveTo的点和最后一个lineTo的结束点之间绘制一条线

ctx.beginPath();	  	// 开始准备画线
ctx.moveTo(100,100);  	// 将画笔移动到一个位置
ctx.lineTo(300,300);  	// 准备绘制从开始点到这个点的线，
ctx.lineTo(300,200);	// 准备绘制从上一个点到这个点的线，
ctx.lineTo(430,180);	// 准备绘制从上一个点到这个点的线，

ctx.closePath();        // 闭合路径

ctx.stroke();	        // 正式开始划线
1.6 绘制新的线条开始

可以使用beginPath() 表示开始一个新的路径

ctx.beginPath()
ctx.moveTo(50, 50);
ctx.lineTo(300, 300);
ctx.stroke()

ctx.beginPath()
ctx.lineTo(300, 200);
ctx.lineTo(430, 180);
ctx.stroke()

可以使用lineWidth属性设置线的宽度

ctx.beginPath();	  	
ctx.moveTo(100,100);  	
ctx.lineTo(300,300);  	
ctx.lineTo(300,200);	
ctx.lineTo(430,180);	

ctx.strokeStyle = 'red';// 绘制描边的颜色
ctx.closePath();        // 闭合路径
ctx.lineWidth = '10';   // 绘制线的宽度
ctx.stroke();	

ctx.filStyle = 'skyblue';// 绘制填充颜色
ctx.fill();				// 绘制填充色
1.7 绘制线条的转角

lineJoin : 边界连接点样式

	miter(默认值),round(圆角),bevel(斜角)

ctx.moveTo(50, 50);
ctx.lineTo(300, 300);

ctx.lineTo(300, 200);
ctx.lineTo(430, 180);
ctx.closePath()
ctx.strokeStyle = 'red';
ctx.lineWidth = 20;
ctx.lineJoin = 'round'
ctx.stroke()
1.8 端点样式

lineCap: 端点样式

	butt(默认值),round(圆角),square(高度多出线宽一半)

ctx.moveTo(50, 50);
ctx.lineTo(300, 300);
ctx.strokeStyle = 'red';
ctx.lineWidth = 50;
ctx.lineCap = 'round'
ctx.stroke()
2. 填充 fill()

还可以是用fill()给闭合路径后的闭合区域填充颜色

ctx.beginPath();	  	// 开始准备画线
ctx.moveTo(100,100);  	// 将画笔移动到一个位置
ctx.lineTo(300,300);  	// 准备绘制从开始点到这个点的线，
ctx.lineTo(300,200);	// 准备绘制从上一个点到这个点的线，
ctx.lineTo(430,180);	// 准备绘制从上一个点到这个点的线，
ctx.closePath();        // 闭合路径
ctx.stroke();	        // 正式开始划线 

ctx.fill();				// 绘制填充色
2.1 绘制填充颜色 fillStyle

strokeStyle 属性修改描边颜色

fillStyle 属性修改填充颜色

ctx.beginPath();	  	
ctx.moveTo(100,100);  	
ctx.lineTo(300,300);  	
ctx.lineTo(300,200);	
ctx.lineTo(430,180);	

ctx.strokeStyle = 'red';// 绘制描边的颜色
ctx.closePath();        // 闭合路径
ctx.stroke();	

ctx.filStyle = 'skyblue';// 绘制填充颜色
ctx.fill();				// 绘制填充色

三.弧与圆形

1. 绘制弧度及圆形的公式
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
1.1 参数
  1. x,y为圆心的坐标
  2. radius 为圆形的半径
  3. startAngle 为弧度的起始位置,0是正x轴的
  4. endAngle 为弧度的终点位置,
  5. anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制
1.2 注意

canvas中角度是弧度制

弧和圆形也是笔触(描边),所以也需要以beginPath()开始

var ctx = mycanvas.getContext('2d');

ctx.beginPath();
ctx.arc(150,150,100,0,2*Math.PI,false);

ctx.arc(200,200,100,0,2,false);

ctx.arc(150,150,100,2,2,false);
ctx.fill();

ctx.beginPath();
ctx.arc(150,150,100,2,0,true);
ctx.strokeStyle= 'red';
ctx.lineWidth = 2;
ctx.stroke();

四. 绘制曲线

1. 绘制弧度曲线

arcTo(x1,y1,x2,y2,r)

	x1,y1 坐标一  x2,y2坐标二   r圆弧半径

ctx.moveTo(100, 300)
ctx.arcTo(100, 100, 200, 100, 50)
ctx.stroke()
2. 绘制贝塞尔曲线
2.1 绘制公式
ctx.quadraticCurveTo(cp1x,cp1y,x,y)
2.2 参数
  1. cp1x, cp1y 为贝塞尔曲线的控制点
  2. x,y 为绘制曲线的终点
ctx.beginPath()
ctx.moveTo(100,100);
ctx.quadraticCurveTo(200,100,200,200)
ctx.stroke();
3. 绘制二次贝塞尔曲线
3.1 绘制公式
ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
3.2 参数
  1. cp1x, cp1y 为贝塞尔曲线的第一个控制点
  2. cp2x, cp3y 为贝塞尔曲线的第二个控制点
  3. x,y 为绘制曲线的终点
ctx.beginPath()
ctx.moveTo(100,100);
ctx.bezierCurveTo(200,120,50,150,200,200);
ctx.stroke();

五. canvas变换

1. translate(x,y)

坐标基准点偏移 : 从起始点为基准，移动到当前位置

ctx.translate(100, 100)
ctx.arc(100, 100, 50, 0, Math.PI * 2, true)
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;

ctx.stroke()
2.rotate(弧度):

旋转 弧度公式 ：角度*PI/180

以画布左上角为基点

ctx.rotate(Math.PI / 180 * 30)
ctx.rect(200, 200, 100, 100)
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;

ctx.stroke()

​

3. scale(wb,hb)

缩放比例(缩放canvas绘制的图片)

ctx.scale(1.5, 1.5)
ctx.rect(200, 200, 100, 100)
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;

ctx.stroke()

这里不单单将宽高放到,圆心坐标也会乘以倍数

六. 保存与恢复路径

1. 保存路径 save()
2.恢复路径 restore()
ctx.save()
ctx.scale(3, 2)
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 20)
ctx.restore()


ctx.beginPath()
ctx.fillRect(0, 50, 100, 20)

会封闭一个独立路径 不会对外边的区域产生影响

七 绘制图片

1. 绘制图片
1.1 创建图片对象,获取图片

图片预加载，获取图片文件

const img = new Image();
img.src = '../1.jpg'
1.2 onload事件,当图片加载完成执行绘制
img.onload = function(){}
1.3 图片加载完成后将图片绘制在画布上

ctx.drawImage(image, dx, dy, dWidth, dHeight);

绘制图片(图片对象,画布坐标x,画布坐标y,绘制显示图片宽度,绘制显示图片高度)

const img = new Image();
img.src = '../1.jpg';
img.onload = function () {
    ctx.drawImage(this, 0, 0, 100, 300)
}
1.4 切图

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数:

  1. image 绘制到上下文的元素

  2. sx 可选

    需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。

  3. sy 可选

    需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。

  4. sWidth 可选

    需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。

  5. sHeight 可选

    需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。

  6. dx

    image的左上角在目标canvas上 X 轴坐标。

  7. dy

    image的左上角在目标canvas上 Y 轴坐标。

  8. dWidth 可选

    image在目标canvas上绘制的宽度。

  9. dHeight 可选

    image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。

const img = new Image();
img.src = '../1.jpg';
img.onload = function () {
    ctx.drawImage(this, 50, 50, 500, 500, 100, 100, 100, 100)
}
2. 填充背景
2.1 createPattern(img,平铺方式)

参数: 平铺方式:repeat,repeat-x,repeat-y,no-repeat

const img = new Image();
img.src = '../1.jpg';
img.onload = function () {
    const bg = ctx.createPattern(img, 'no-repeat');
    ctx.fillStyle = bg;
    ctx.fillRect(100, 100, 300, 200)
}
3. 颜色渐变
3.1 线性渐变:createLinearGradient(x1,y1,x2,y2)

​ x1,y1起始坐标点

​ x2,y2结束坐标点

3.2 径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)

​ x1,y1,r1内圆坐标及半径

​ x2,y2,r2外圆坐标及半径

3.3 addColorStop(位置,颜色)

​ 位置:渐变点 0-1之间 可多个

例子,

线性渐变

let color = ctx.createLinearGradient(0, 0, 500, 500);
color.addColorStop(0, 'pink');
color.addColorStop(0.5, 'yellow')
color.addColorStop(1, 'deeppink')

ctx.fillStyle = color;
ctx.fillRect(0, 0, 500, 500)

径向渐变

let color = ctx.createRadialGradient(200, 200, 100, 200, 200, 200);
color.addColorStop(0, 'pink');
color.addColorStop(0.5, 'yellow')
color.addColorStop(1, 'deeppink')

ctx.fillStyle = color;
ctx.fillRect(0, 0, 500, 500)

八.绘制文本

1. 绘制文本
  1. strokeText(文本,x,y); 绘制空心文本
  2. fillText(文本,x,y); 绘制实心文本
  3. font = “font-size font-family” 注:尺寸 字体缺一不可
  4. textAlign = “”;文本左右对齐方式
    ​ start center end left right
  5. textBaseline文本上下对齐方式
    ​ alphabetic 默认。文本基线是普通的字母基线。
    ​ top 文本基线是 em 方框的顶端。。
    ​ hanging 文本基线是悬挂基线。
    ​ middle 文本基线是 em 方框的正中。
    ​ ideographic 文本基线是表意基线。
    ​ bottom 文本基线是 em 方框的底端。
    ​ measureText(文本).width; 文本实际宽度(只有宽度值)
let str = 'wuwei'
ctx.font = '50px 宋体'
ctx.textAlign = 'center'
ctx.textBaseline = 'top'
ctx.strokeText(str, 100, 100)
ctx.fillText(str, 100, 200)
2. 绘制阴影
  1. shadowOffsetX,shadowOffsetY x轴、y轴偏移
  2. shadowBlur 阴影模糊度
  3. shadowColor 阴影颜色
    ​ 默认颜色:rgba(0,0,0,0)
ctx.shadowOffsetX = '10'
ctx.shadowOffsetY = '10'
ctx.shadowBlur = '3'
ctx.shadowColor = 'red'

九.API使用总结

1. canvas标签
<canvas width="" height="" id="">
    您的浏览器不支持canvas，请更换浏览器！
</canvas>

​ 默认宽度300px，默认高度 150px

2. canvas绘图环境设置

​ getContext(“2d”); 目前支持2d绘图环境

3.绘图路径:
  1. beginPath() :开始路径
  2. closePath():闭合路径
  3. moveTo(x,y):将触笔移动到x,y点
  4. lineTo(x,y):绘制到x,y点
  5. stroke(): 触笔方法 画线 默认为黑色
  6. fill():填充方法
  7. rect(x,y,w,h):矩形路径
  8. save():保存路径
  9. restore():恢复路径
4. 绘制矩形：
  1. fillRect(x,y,w,h) 填充实心矩形
  2. strokeRect(x,y,w,h) 绘制空心矩形
  3. clearRect(x,y,w,h) 清除矩形选区
5. 设置绘图样式：
  1. fillStyle: 填充颜色
  2. strokeStyle: 触笔颜色
  3. lineWidth: 触笔宽度(线宽)
6. 图形边界样式：
  1. lineJoin : 边界连接点样式
    miter(默认值),round(圆角),bevel(斜角)
  2. lineCap: 端点样式
    butt(默认值),round(圆角),square(高度多出线宽一半)
7. 绘制圆形：
  1. arc(x,y,r,0,360,false)
    x,y 圆心坐标位置
    r 圆半径
    0,360 从0度到360度 绘制一个圆形(用弧度公式)
    true/false 逆时针/顺时针绘图
8. 绘制曲线
  1. arcTo(x1,y1,x2,y2,r)
    x1,y1 坐标一 x2,y2坐标二 r圆弧半斤
  2. quadraticCurveTo(dx,dy,x1,y1)
    贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
  3. bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
    贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
    x1,y1结束坐标
9. canvas变换
  1. translate(x,y)
    坐标基准点偏移 : 从起始点为基准，移动到当前位置
  2. rotate(弧度): 旋转 弧度公式 ：角度*PI/180
  3. scale(wb,hb)缩放比例(缩放canvas绘制的图片)
10. 绘制图片
  1. 图片预加载，获取图片文件
  2. onload事件,监听图片是否加载完毕,如果加载完毕执行第三步
  3. drawImage(img,x,y,w,h);绘制图片(图片,坐标x,坐标y,宽度,高度)
11.设置背景
  1. createPattern(img,平铺方式)
    平铺方式:repeat,repeat-x,repeat-y,no-repeat
12. 颜色渐变
  1. 线性渐变:createLinearGradient(x1,y1,x2,y2)
    x1,y1起始坐标点
    x2,y2结束坐标点
  2. 径向渐变:createRadialGradient(x1,y1,r1,x2,y2,r2)
    x1,y1,r1内圆坐标及半径
    x2,y2,r2外圆坐标及半径
  3. addColorStop(位置,颜色)
    位置:渐变点 0-1之间 可多个
13. 绘制文本
  1. strokeText(文本,x,y); 绘制空心文本
  2. fillText(文本,x,y); 绘制实心文本
  3. font = “font-size font-family” 注:尺寸 字体缺一不可
  4. textAlign = “”;文本左右对齐方式
    start center end left right
  5. textBaseline文本上下对齐方式
    alphabetic 默认。文本基线是普通的字母基线。
    top 文本基线是 em 方框的顶端。。
    hanging 文本基线是悬挂基线。
    middle 文本基线是 em 方框的正中。
    ideographic 文本基线是表意基线。
    bottom 文本基线是 em 方框的底端。
  6. measureText(文本).width; 文本实际宽度(只有宽度值)
14. 阴影
  1. shadowOffsetX,shadowOffsetY x轴、y轴偏移
  2. shadowBlur 阴影模糊度
  3. shadowColor 阴影颜色
  4. 默认颜色:rgba(0,0,0,0)
guokanglun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现绘制COS余弦图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 57
JavaScript实现绘制COS余弦图（附完整源码）
canvas可视化波形音频播放器(原创)
03-07
"canvas可视化波形音频播放器(原创)"项目就是这样一个实现，它将音频数据与视觉元素相结合，提供了一种直观的音频播放体验。 首先，我们要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过...
第十五章：使用Canvas绘图（2D上下文）
miaoch的博客
06-22 1397
使用Canvas绘图 -
自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
weixin_30546189的博客
08-10 150
对于自定义控件的意义不言而喻，所以对它的深入研究是很有必要的，前些年写过几篇关于UI效果的学习过程，但是中途比较懒一直就停滞了，而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的，所以接下来会不断的去记录自己学习关于自定义控件一些心路历程，重点是要深入剖析其机制的原理。 而从最基础Canvas的绘制开始练习，没有扎实的基础何谈深入呢？而这里最终会实现一个人的笑脸的样子来学一些基础的...
cos-sin:使用cos和sin函数HTML Canvas Math示例
04-18
余弦 使用Angular和html canvas的Cos / Sin Math动画。 演示： :
【Canvas技法】绘制正三角形、切角正三角形、圆角正三角形
一念非凡(46岁待业程序员)
04-15 988
在Html5/Canvas中绘制正三角形、切角正三角形、圆角正三角形
Canvas利用圆绘制正余弦函数叠加图像
Andersen_的专栏
03-16 2399
前言昨天看傅里叶变换的资料，看到这篇文章：如果看了此文你还不懂傅里叶变换，就过来掐死我吧， 讲得很清晰，中间一幅图的美丽深深吸引了我。。。 于是萌生了利用Canvas把它画下来的想法。可是正余弦函数的基础早已经忘得差不多了， 所以先画个大概，慢慢更新当作毕设前练手吧。现在的样子： 博客新手。。如果各位看官觉得条理比较乱请指教一下 准备工作画圆相关先自定义了一个Circle类，方便添
【JavaScript】canvas 绘图 r=a(1-sinθ)
zbxinsheng的博客
01-10 358
/ r=a(1-sinθ)公式
HTML5 Canvas核心技术源码技术代码
03-27
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
html2canvas(1.0.0)
02-22
4. **回调函数**：提供onrendered回调函数，当Canvas渲染完成后会触发，开发者可以在此处进行后续操作，比如保存图片或进行图像处理。 三、使用方法 使用html2canvas非常简单，只需要在HTML文档中引入库文件，然后...
svg转img所需 html2canvas方法，svg转canvas所需canvg方法
04-26
- 调用`canvg`方法，传入Canvas元素和SVG数据作为参数，开始在Canvas上绘制SVG。 示例代码： ```javascript var svgElement = document.getElementById('mySVG'); var svgData = svgElement.outerHTML; // ...
使用canvas之趣味制作（二）笑脸
weixin_46899191的博客
02-02 199
canvas之趣味制作笑脸如何插入一段漂亮的代码片 如何插入一段漂亮的代码片 //wxml <canvas type="2d" id="myCycle"></canvas> //js Page({ onLoad() { //二、圆 const query2 = wx.createSelectorQuery() query2.select('#myCycle').fields({ node: true, size: true }).exec(res =&gt
《每周一点canvas动画》——角度反弹
weixin_33720452的博客
07-10 168
每周一点canvas动画代码文件 在上一节我们介绍了高级的坐标旋转方法，我们只需要知道物体的位置，通过设定每一帧需要旋转的角速度,通过公式 newX = x*cos - y*sin; newY = y*cos + x*sin; 就可以计算出做圆周运动时物体的下一个坐标位置。本节的内容与上一节的内容息息相关。所以，务必把上一节的内容弄懂了，...
Canvas 绘制不同样式的六角星
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-12 809
通过这些示例，你应该能更好地理解如何使用 Canvas 进行图形绘制，并且可以根据自己的需要进行扩展和修改。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过调整颜色、大小和位置，可以创造出各种不同的效果。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，我们首先定义一个函数来计算六角星的顶点坐标。我们可以改变颜色、填充样式以及描边样式来创建不同的视觉效果。接下来，我们可以利用这些坐标来绘制六角星。
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景)
一起coding，一起嗨。
08-05 1379
代码】cavans图形绘制。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
热门推荐
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
前端笔记之Canvas
RopeHuo
04-18 524
前端笔记之Canvas 一、Canvas基本使用 Canvas是HTML5的画布，Canvas算是“不务正业”的面向对象大总结，将面向对象玩极致。 算法为王！就是说canvas你不会，但是算法好，不怕写业务，不怕代码量，只要稍微学学API就能出活。 Canvas这里是HTML5新标签，直接要了flash的命。 1.1 Canvas简介...
proxy 代理
gklcsdn的博客
10-21 4535
Proxy 代理 Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。 讲通俗一点就是扩展(增强)了对象,方法(函数)的一些功能 ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。 Proxy其实是设计模式的一种,代理模式 1. 语法使用 new Proxy(target,handle) 参数 第一个参数: target 是你要代理的对象 第二个参数,handle是对代理对象做什么操作 { ​ set(){}, ​ get
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值