【题目】【5天】canvas元素

gnehc 发布于2019-08-26 11:52 / 3231人阅读

摘要：题目一绘制雪人，传递一个值，是填充，是圆圈。题目二编写一个函数，他将来接受一个数组，绘制一条直线连接这些店。

题目一：绘制雪人，传递一个Boolean值，true是填充，false是圆圈。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var fillCricle = function(x,y,lineWidth,radius,boolean,color){
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    if(boolean){
        ctx.fillStyle = color;
        ctx.fill();
    }else{
        ctx.strokeStyle = color;
        ctx.stroke();
    }

};

fillCricle(100,100,4,60,false,"black");
fillCricle(100,110,4,10,true,"red");
fillCricle(80,80,4,10,true,"green");
fillCricle(120,80,4,10,true,"green");

fillCricle(100,240,4,80,false,"black");
fillCricle(100,240,4,10,true,"green");
fillCricle(100,208,4,10,true,"green");
fillCricle(100,272,4,10,true,"green");

题目二：编写一个函数，他将来接受一个数组：point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]]，绘制一条直线连接这些店。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var point =[[50,50],[50,100],[125,120],[100,50],[70,90],[100,90],[70,120]];

var drawPoint = function (point) {
    //ctx.moveTo(point[0][0],point[0][1]);
    for(var i = 0; i < point.length; i++){
        ctx.lineTo(point[i][0],point[i][1]);
        ctx.stroke();
    }
};
drawPoint(point);

这题花了一些时间，主要问题是：

绘制直线的思路是没理顺，应该是绘制第一个点，第二个点，第三个点，一次往后，最后连接起来；而当时我的思路是，两个点两个点连接，就一直在moveTo、lineTo循环中。

不需要moveTo也可以绘制直线。

云服务器超融合服务器阿里云服务器退款5天阿里云服务器试用5天阿里云的服务器超过5天 Canvas

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107718.html

【题目】【8天】canvas画板

摘要：和监听用户是否在绘画。再绘画不在绘画。监测用户是在使用橡皮檫，是在使用橡皮擦，停止使用铅笔。使用，会变为使用，后面会增加一个属性值。的作用是获取宽度也就是宽度移动端支持多点触控，所以要获取需要加上，表示第一个值 canvas画板，比较简易，目前还有很多bug1、手机端上下会晃动2、下载按钮微信上没法用3、下载后背景色是透明4、切换成橡皮擦后，需要先点铅笔才能绘画，不能直接点颜色 ...

Xufc 2019-08-22 17:09 评论0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
IMWeb前端提升营七天学习总结

摘要：写在前面月到这天，前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。并且减轻服务器的负担，的原则是按需取数据，可以最大程度的减少冗余请求和响应对服务器造成的负担。控制表单控件的禁用状态。写在前面 5月24到30这7天，IMWeb前端提升营，腾讯大佬们分享个人经验，使出各种前端方面的大招。从中学习了很多前端方面的知识，也get到了前端学习的方法论，还有一些算法知识等等。现将...

mating 2019-08-20 16:59 评论0 收藏0