本文详细介绍了HTML5 Canvas的基本用法，包括如何获取画布上下文、设置画布宽高、绘制图形如矩形、圆形，以及使用渐变、阴影效果等。还探讨了图像的渲染方式和画布API，提供了时钟、飞鸟、马赛克和刮刮卡等实例动画，适合前端开发者学习Canvas技术。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表盘实例</title>
<style>
body, html {
background-color: #bfa;
overflow: hidden;
}
canvas {
margin: 150px auto;
border: 1px solid black;
display: block;
background-color: white;
}
</style>
</head>
<body>
<!--
注：
-- 1.canvas图形的渲染有别于html图像的渲染
canvas的渲染很快,不会出现代码覆盖后延迟渲染的问题
写canvas代码一定要具有同步思想
--在获取上下文时,一定要要先判断
--画布的宽高问题
画布默认宽高300*150
切记要使用html的attribute的形式来定义画布的宽高
通过css形式定义会缩放画布内的图形
--绘制矩形的问题
a.边框宽度的问题,边框宽度是在偏移量上下分别渲染一半,可能会出现小数边框
一旦出现小数边框都会向上取整
最低0.47元/天 解锁文章
扫一扫
2190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
