实验四使用CANVAS API画图

最新推荐文章于 2023-05-14 22:07:00 发布

Crescent_P

最新推荐文章于 2023-05-14 22:07:00 发布

阅读量654

点赞数 3

分类专栏： Web前端作业文章标签： javascript css html

本文链接：https://blog.csdn.net/Destiny_159/article/details/110351944

版权

本文介绍如何使用HTML5 Canvas API实现鼠标绘图功能，包括选择画笔颜色和粗细。通过实验，旨在提升HTML编程理解和Canvas绘图技巧。

摘要由CSDN通过智能技术生成

实验四使用CANVAS API画图
一、实验目的
1、体会HTML编程；
　　2、掌握Canvas绘图
二、实验内容

实现利用鼠标画图，如下效果，可以选择画笔颜色和粗细（分别简单预定义几种即可），其中，“工具”和“形状”两栏的功能可以不强求实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
    
            margin: 0;
            padding: 0;
        }
        body{
    
            background: gainsboro;
        }
        #cav{
    
            background: white;
            position: relative;
        }
        #sel{
    
            display: block;
            width: 1190px;
            height: 30px;
            background: white