博客
关于我
Canvas画布(一)基本用法
阅读量:594 次
发布时间:2019-03-11

本文共 2272 字,大约阅读时间需要 7 分钟。

Canvas绘图入门教程

1. Canvas基础使用

在开始绘图之前,首先需要设置Canvas的宽高。可以通过设置widthheight属性来指定绘制区域的大小,或者通过JavaScript动态设置以跟随窗口大小变化。对于不支持Canvas的浏览器,可以添加友好的提示信息。

示例代码

let canvas = document.querySelector('#mycanvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;window.addEventListener('resize', function () {    canvas.width = window.innerWidth;    canvas.height = window.innerHeight;});if (!canvas.getContext) return;let ctx = canvas.getContext('2d');// 获取像素数据let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 获取图像数据URLlet imgURL = canvas.toDataURL('image/png');

2. 绘制元素

Canvas支持多种绘制元素,包括直线、矩形、圆、贝塞尔曲线、图片、文本等。以下是常用元素的绘制方法示例。

2.1 直线

ctx.strokeStyle = 'green';ctx.lineWidth = '10';ctx.lineJoin = 'round';ctx.lineCap = 'round';ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(100, 100);ctx.stroke();

2.2 矩形

ctx.strokeStyle = 'black';ctx.lineWidth = '2';ctx.strokeRect(10, 10, 200, 100);

2.3 圆

ctx.beginPath();ctx.arc(300, 300, 50, 0, Math.PI * 2);ctx.stroke();

2.4 贝塞尔曲线

ctx.beginPath();ctx.bezierCurveTo(    50, 50,     200, 150,     150, 300);ctx.stroke();

2.5 图片

let img = new Image();img.src = './image/0.jpg';img.onload = function () {    let pattern = ctx.createPattern(img, 'repeat');    ctx.fillStyle = pattern;    ctx.fillRect(0, 0, 200, 200);    ctx.drawImage(img, 0, 300, 100, 100);};

2.6 文本

ctx.fillStyle = 'black';ctx.font = '20px Arial';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillText('欢迎访问我们的网站', canvas.width/2, canvas.height/2);

3. 渐变与样式状态

Canvas支持线性渐变和径向渐变,可以通过createLinearGradientcreateRadialGradient创建,并将其应用于填充或描边。

3.1 线性渐变

let gra = ctx.createLinearGradient(800, 10, 1000, 10);gra.addColorStop(0, 'red');gra.addColorStop(1, 'blue');ctx.fillStyle = gra;ctx.fillRect(800, 0, 200, 400);

3.2 径向渐变

let gra = ctx.createRadialGradient(900, 50, 50, 900, 50, 100);gra.addColorStop(0, 'red');gra.addColorStop(0.5, 'green');gra.addColorStop(1, 'blue');ctx.fillStyle = gra;ctx.fillRect(800, 0, 300, 400);

4. 组合操作

globalCompositeOperation属性用于控制新绘制内容与旧内容的混合方式。常用的值包括'source-over''destination-over'等。

示例

ctx.globalCompositeOperation = 'lighter';ctx.fillStyle = 'red';ctx.fillRect(50, 50, 100, 100);ctx.fillStyle = 'green';ctx.fillRect(100, 100, 100, 100);

通过设置不同的globalCompositeOperation值,可以实现不同的混合效果,如'lighter'会显示两种颜色的重叠部分混合后的效果。

转载地址:http://jmctz.baihongyu.com/

你可能感兴趣的文章
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>
mysql_real_connect 参数注意
查看>>