HTML5-canvas的使用方法介绍

PHP中文网

发布时间：2017-06-21 15:52:14

1949人浏览过

来源于php中文网

原创

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

立即学习“前端免费学习笔记（深入）”；

　　注意: 默认情况下

　　画方

DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="赵慧娟"><title>title><script src="Scripts/jquery-1.10.2.js?1.1.10">script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.fillRect(10,10,100,100);
　　　　　　　　  //ctx.moveTo(0,0);　　　　//定义开始坐标
　　　　　　　　　//ctx.lineTo(100,100);　　//定义结束坐标
　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条

})

运行结果：

　　画圆

DOCTYPE html><html><head><meta charset="UTF-8" name="author" content="赵慧娟"><title>title><script src="Scripts/jquery-1.10.2.js?1.1.10">script><script type="text/javascript">$(function(){var canvas=document.getElementById("myCanvas")var ctx=canvas.getContext("2d");
                ctx.fillStyle="deeppink";
                ctx.arc(50,50,50,0,2*Math.PI);
                ctx.stroke();
　　　　　　　　　//ctx.fillText("Hello World",10,50);　　//绘制实心字体
　　　　　　　　　//ctx.strokeText("Hello World",10,50);　//绘制空心字体
})script><style type="text/css">canvas{border: 1px solid #000;}style>head><body><canvas id="myCanvas" width="100" height="100">canvas>body>html>

运行结果：

jQuery全屏游戏角色介绍切换特效

jQuery全屏游戏角色介绍切换特效是一款使用flexbox来进行布局，以垂直切换幻灯片的方式来展示游戏人物的图片和角色信息。

下载

　　渐变

　　createLinearGradient(x,y,x1,y1) - 创建线条渐变

　　createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue"); 
// 填充渐变ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运行结果：

　　径向/圆渐变

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

运行结果：

图像

运行结果：

（右图为canvas图像）

零基础如何学习 H5 前端开发

H5 前端开发和小程序开发有什么区别

H5页面制作适合哪些应用场景

H5页面制作如何进行测试

H5页面制作是前端开发吗

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何实现table表格中的斜线表头效果下一篇：HTML5的文本样式实例介绍

作者最新文章

小米笔记本重装系统的方法

2024-07-12 05:54

Thinkpad如何重装系统

2024-07-12 05:55

Nvidia控制面板显示设置不可用怎么办

2024-07-15 13:06

美颜相机怎么做海报

2024-07-15 13:06

美颜相机怎么贴纸遮脸脸

2024-07-15 13:09

美颜相机扣款怎么关掉

2024-07-15 13:10

如何开通拼多多

2024-07-15 13:10

拼多多开店如何选品类

2024-07-15 13:12

拼多多是如何成立的

2024-07-15 13:13

是大事

2024-12-27 16:41

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

云朵浏览器入口合集

本专题整合了云朵浏览器入口合集，阅读专题下面的文章了解更多详细地址。

2026.01.20

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java用途介绍

本专题整合了java用途功能相关介绍，阅读专题下面的文章了解更多详细内容。

2026.01.19

java输出数组相关教程

本专题整合了java输出数组相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.19

java接口相关教程

本专题整合了java接口相关内容，阅读专题下面的文章了解更多详细内容。

2026.01.19

xml格式相关教程

本专题整合了xml格式相关教程汇总，阅读专题下面的文章了解更多详细内容。

2026.01.19

PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践，涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例，帮助开发者掌握使用 PHP 构建实时通信与推送服务的完整开发流程，适用于即时消息与高互动性应用场景。

2026.01.19