<% var currentSection = $0; var locale = env.locale; function state(section) { if (section == currentSection) { return "open"; } return "closed"; } var text = mdn.localStringMap({ 'en-US': { 'Canvas_API': 'Canvas API', 'Canvas_tutorial': 'Canvas tutorial', 'Basic_usage': 'Basic usage', 'Drawing_shapes': 'Drawing shapes', 'Applying': 'Applying styles and colors', 'Text': 'Drawing text', 'Using_images': 'Using images', 'Transformations': 'Transformations', 'Compositing': 'Compositing and clipping', 'Basic_animations': 'Basic animations', 'Advanced_animations': 'Advanced animations', 'Pixel_manipulation': 'Pixel manipulation', 'Hitregions': 'Hit regions and accessibility', 'Optimizing': 'Optimizing the canvas', 'Finale': 'Finale', 'Examples': 'Examples', 'raycaster': 'A basic raycaster', 'snippets': 'Canvas code snippets', 'video_canvas': 'Manipulating video using canvas', 'Interfaces': 'Interfaces', 'Documentation': 'Documentation:', 'Useful_lists': 'Useful lists', 'Canvas_tag': 'Pages tagged "Canvas"', 'Contribute': 'Contribute', 'Doc_status': 'Canvas doc status', 'The_MDN_project': 'The MDN project', }, 'zh-CN': { 'Canvas_API': 'Canvas API', 'Canvas_tutorial': 'Canvas 教程', 'Basic_usage': '基本用法', 'Drawing_shapes': '绘制形状', 'Applying': '添加样式和颜色', 'Text': '绘制文本', 'Using_images': '使用图片', 'Transformations': '变形', 'Compositing': '合成与裁剪', 'Basic_animations': '基本动画', 'Advanced_animations': '高级动画', 'Pixel_manipulation': '像素操作', 'Hitregions': '点击区域和无障碍访问', 'Optimizing': 'canvas 的优化', 'Finale': '终极', 'Examples': '示例', 'raycaster': '一个基本的光线投射例子', 'snippets': 'Canvas 代码片段', 'video_canvas': '在 canvas 中操作视频', 'Interfaces': '接口', 'Documentation': '文档:', 'Useful_lists': '常用页面列表', 'Canvas_tag': '拥有 "Canvas" 标签的页面', 'Contribute': '贡献', 'Doc_status': 'Canvas 文档翻译状态', 'The_MDN_project': 'MDN 项目', }, 'ru': { 'Canvas_API': 'Canvas API', 'Canvas_tutorial': 'Руководство по Canvas', 'Basic_usage': 'Базовое использование', 'Drawing_shapes': 'Рисование фигур', 'Applying': 'Применение стилей и цветов', 'Text': 'Рисование текста', 'Using_images': 'Использование изображений', 'Transformations': 'Трансформации', 'Compositing': 'Композиция и обрезка', 'Basic_animations': 'Простые анимации', 'Advanced_animations': 'Расширенные анимации', 'Pixel_manipulation': 'Манипуляция пикселями', 'Hitregions': 'Достижение областей и доступность', 'Optimizing': 'Оптимизация canvas', 'Finale': 'Заключение', 'Examples': 'Примеры', 'raycaster': 'Простой излучатель лучей', 'snippets': 'Спиппеты кода Canvas', 'video_canvas': 'Манипяция видео с помощью canvas', 'Interfaces': 'Интерфейсы', 'Documentation': 'Документация:', 'Useful_lists': 'Полезные списки', 'Canvas_tag': 'Страницы отмеченные "Canvas"', 'Contribute': 'Внести свой вклад', 'Doc_status': 'Статус документации по Canvas', 'The_MDN_project': 'Проект MDN', }, 'ko': { 'Canvas_API': 'Canvas API', 'Canvas_tutorial': 'Canvas 튜토리얼', 'Basic_usage': '기본 사용', 'Drawing_shapes': '도형 그리기', 'Applying': '스타일 및 색상 적용하기', 'Text': '텍스트 그리기', 'Using_images': '이미지 사용하기', 'Transformations': '변형', 'Compositing': '합성 및 클리핑', 'Basic_animations': '기본 애니메이션', 'Advanced_animations': '고급 애니메이션', 'Pixel_manipulation': '픽셀 조작', 'Hitregions': '히트 영역 및 접근성', 'Optimizing': 'Canvas 최적화하기', 'Finale': 'Finale', 'Examples': '예제', 'raycaster': '기본 raycaster', 'snippets': 'Canvas 코드 스니펫', 'video_canvas': 'Canvas를 사용해 비디오 조작하기', 'Interfaces': '인터페이스', 'Documentation': '문서:', 'Useful_lists': '유용한 리스트', 'Canvas_tag': '"Canvas"가 태그된 페이지', 'Contribute': '기여하기', 'Doc_status': 'Canvas 문서 상태', 'The_MDN_project': 'MDN 프로젝트', } }); %>

1. <%=text['Canvas_API']%>
2. <%=text['Canvas_tutorial']%>

   1. <%=text['Basic_usage']%>
   2. <%=text['Drawing_shapes']%>
   3. <%=text['Applying']%>
   4. <%=text['Text']%>
   5. <%=text['Using_images']%>
   6. <%=text['Transformations']%>
   7. <%=text['Compositing']%>
   8. <%=text['Basic_animations']%>
   9. <%=text['Advanced_animations']%>
   10. <%=text['Pixel_manipulation']%>
   11. <%=text['Hitregions']%>
   12. <%=text['Optimizing']%>
   13. <%=text['Finale']%>
3. <%=text['Examples']%>

   1. <%=text['raycaster']%>
   2. <%=text['snippets']%>
   3. <%=text['video_canvas']%>
4. <%=text['Interfaces']%>

   1. <%-await template("domxref", ["HTMLCanvasElement"])%>
   2. <%-await template("domxref", ["CanvasRenderingContext2D"])%>
   3. <%-await template("domxref", ["CanvasGradient"])%>
   4. <%-await template("domxref", ["CanvasPattern"])%>
   5. <%-await template("domxref", ["ImageBitmap"])%>
   6. <%-await template("domxref", ["ImageData"])%>
   7. <%-await template("domxref", ["TextMetrics"])%>
   8. <%-await template("ExperimentalBadge", [1])%> <%-await template("domxref", ["Path2D"])%>
5. <%=text['Documentation']%>
6. >

   <%=text['Useful_lists']%>

   1. <%=text['Canvas_tag']%>
7. >

   <%=text['Contribute']%>

   1. <%=text['Doc_status']%>
   2. <%=text['The_MDN_project']%>